/* sns.html.energy — Times New Roman, black on white, blue links, colored stars.
   One text size throughout, and nothing is gray: emphasis comes from italics, rules
   and the city colors instead. */

:root {
    /* one column width for the whole site — header, body, map and footer */
    --col: 600px;
    --text: 17px;   /* one size for every bit of text on the site */
    --blue: #0000ee;
    --rule: #000;
    /* the 2026 map palette, so both maps look like the same world */
    --map-ocean: #000071;
    --map-land: #1f682c;
    --map-border: #1f682c;
    /* Pages about a person or a city override these with that city's color. */
    --c: #000;
    --wash: transparent;
    --ink: #000;
}

* { box-sizing: border-box; }

/* The hidden attribute only works through a UA rule, so any author `display`
   below would quietly beat it. Keep it winning. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0 20px 60px;
    font-family: "Times New Roman", Times, serif;
    font-size: var(--text);
    line-height: 1.45;
    color: #000;
    background: #fff;
}

/* One size for everything on the page. */
h1, h2, h3, p, li, td, th, a, button, input, select, textarea, time, span, div, label, figcaption, small {
    font-size: var(--text);
}

/* Safari on iOS zooms the page in whenever you tap a form control smaller than
   16px. Never let one be, whatever --text is set to. Done this way rather than
   with maximum-scale on the viewport, which would block pinch-zoom entirely. */
input, select, textarea, button {
    font-size: max(16px, var(--text));
}

/* A profile or city page is washed in its color. */
body.tinted { background: var(--wash); }

a { color: var(--blue); }
a:visited { color: #551a8b; }

/* Page headers: bold, not underlined. Everything is one size, so weight is
   what marks a heading. */
h1 {
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    margin: 0 0 6px;
}
/* Section headers match the page title: bold and upright, never italic. One
   rhythm for every section — 34px above, 12px below — so the gaps between
   blocks on a page are even. */
h2 { font-weight: bold; font-style: normal; margin: 34px 0 12px; }
h3 { font-weight: bold; font-style: normal; margin: 34px 0 12px; }

/* --- chrome ----------------------------------------------------------- */

header#top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* space-between rather than a margin on the nav: on one line it pushes the
       nav to the right, and when the nav wraps onto its own line it becomes the
       only item there, so it starts from the left instead of hanging right. */
    justify-content: space-between;
    gap: 6px 14px;
    max-width: var(--col);
    margin: 0 auto;
    padding: 18px 0 12px;
    border-bottom: 1px solid var(--rule);
}
.wordmark { text-decoration: none; color: #000; font-weight: bold; }
.wordmark:visited { color: #000; }
header#top nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
header#top nav a.here { color: #000; text-decoration: none; border-bottom: 1px solid #000; }

main { max-width: var(--col); margin: 0 auto; padding-top: 20px; }

footer {
    max-width: var(--col);
    margin: 50px auto 0;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}

/* --- forms ------------------------------------------------------------- */

form.inline { display: inline; }

button {
    font-family: inherit;
    font-weight: normal;
    color: var(--blue);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}
button:disabled { color: #000; cursor: default; text-decoration: none; font-style: italic; }

input[type="text"],
input[type="password"],
select,
textarea {
    font-family: inherit;
    padding: 6px 8px;
    border: 1px solid #000;
    border-radius: 0;
    background: #fff;
    color: #000;
    width: 100%;
    max-width: 100%;
}
select { -webkit-appearance: none; appearance: none; background-image: none; }
/* The focus ring sits on top of the field's own border instead of outside it,
   so a focused field shows one line, not two. */
input:focus, select:focus { outline: 2px solid #000; outline-offset: -2px; }

form.stack { display: flex; flex-direction: column; gap: 4px; max-width: 380px; }
form.stack label { font-style: italic; margin-top: 12px; }
form.stack button[type="submit"] {
    align-self: flex-start;
    margin-top: 18px;
    border: 1px solid #000;
    border-radius: 999px;
    padding: 6px 16px;
    background: #fff;
    color: #000;
    text-decoration: none;
}

/* a miniature of the profile page you're about to have */
.preview {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #000;
}
.preview-star { flex: none; }
.preview-star svg { display: block; overflow: visible; }
.preview-name { margin-bottom: 4px; word-break: break-word; }

/* The share box at the top of the feed, and the album's upload box: one box
   around the whole form. The fields inside drop their own boxes and become
   plain underlines, so the box isn't nested inside more boxes. */
form.share {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 30px;
    padding: 14px;
    border: 1px solid #000;
}
form.share input[type="text"] {
    border: 0;
    border-bottom: 1px solid #000;
    padding: 4px 2px;
    background: transparent;
}
/* A focused field looks exactly like an unfocused one — no thicker rule, no
   ring. (Text inputs match :focus-visible even on a mouse click, so that was
   no help here.) The caret is the only cue. */
form.share input[type="text"]:focus,
form.share input[type="text"]:focus-visible { outline: none; }
.share-bottom { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.share-bottom button[type="submit"] {
    margin-left: auto;
    border: 1px solid #000;
    border-radius: 999px;
    padding: 5px 18px;
    background: #fff;
    color: #000;
    text-decoration: none;
}
/* tapping the label opens the picker; it shouldn't select the words instead */
label.file {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
label.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.file span { color: var(--blue); text-decoration: underline; }
label.file input:focus-visible + span { outline: 2px solid #000; }

#dither-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    font-style: italic;
}
#dither-preview img {
    width: 110px;
    height: auto;
    border: 1px solid #000;
    image-rendering: pixelated;
}

.hint { margin: 4px 0 0; font-style: italic; }
.intro { margin: 0 0 24px; }
.empty, .tally { font-style: italic; }
.tally { margin-top: 36px; }
.quiet { font-style: italic; }

.flash {
    margin: 0 0 20px;
    padding: 8px 12px;
    border: 1px solid #000;
    background: #ffffcc;
}
.flash.ok { background: #ddffdd; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- posts ------------------------------------------------------------- */

ol.posts { list-style: none; margin: 0; padding: 0; }

li.post { padding: 14px 0; border-top: 1px solid #000; }

.byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.byline .from { font-style: normal; }
.byline time { margin-left: auto; white-space: nowrap; font-style: italic; }
.byline .delete button { text-decoration: none; }

.who {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #000;
    text-decoration: none;
}
.who:visited { color: #000; }
.who:hover { text-decoration: underline; }

/* The city is plain text with its star — no box, no fill. The star carries the
   color; the words just say where.
   Plain inline layout, not inline-flex: an inline-flex box takes its baseline
   from its first child, and an SVG has no baseline, which floated the star and
   the city name above the line of text around them. */
.from-city {
    color: #000;
    text-decoration: none;
}
.from-city:visited { color: #000; }
.from-city:hover span { text-decoration: underline; }
.from-city svg.star {
    display: inline-block;
    vertical-align: -0.2em;
    margin-right: 4px;
}

p.link { margin: 6px 0 0; word-break: break-word; }
p.note { margin: 4px 0 0; }

.media {
    display: block;
    max-width: 100%;
    max-height: 460px;
    margin-top: 10px;
    border: 1px solid #000;
    background: #fff;
}
.media-link { display: inline-block; }
video.media { width: 100%; }

svg.star { display: block; overflow: visible; flex: none; }
/* the shared star glyph + blur, referenced by every <use> on the page */
svg.star-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pager { display: flex; gap: 20px; margin-top: 26px; }

/* --- the photo album ---------------------------------------------------- */

/* One picture per row, each the full width of the text column. */
ul.album-grid {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.album-grid li { margin-bottom: 30px; }
.album-media {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    background: #fff;
    border: 1px solid #000;
    box-shadow: none;
}
img.album-media.dithered {
    cursor: pointer;
    /* keep the dither crisp instead of blurry when scaled up */
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}
img.album-media.loading-full { opacity: 0.6; }
.album-by {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.album-note { margin: 3px 0 0; }

/* --- profile and city pages -------------------------------------------- */

.profile-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}
.profile-head .big-star { flex: none; }
.profile-head .where { margin: 0 0 6px; }
.profile-head .bio { margin: 0 0 6px; }
.profile-head .energy { margin: 0 0 6px; font-style: italic; }

/* A grid of boxed cells. Each cell carries all four sides and overlaps its
   neighbour by 1px, so shared edges stay hairline — and no rule runs on past
   the last cell in a row, which a border on the container would do. */
ul.people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.people li {
    border: 1px solid #000;
    margin: 0 -1px -1px 0;
}
ul.people a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    padding: 12px 6px;
    color: #000;
    text-decoration: none;
    text-align: center;
    word-break: break-word;
}
ul.people a:visited { color: #000; }
ul.people a svg { width: 40px; height: 40px; }
ul.people a:hover span { text-decoration: underline; }

/* the HTML Day event details on a city page, and the facts on a profile */
table.event,
table.facts {
    border-collapse: collapse;
    margin: 0 0 16px;
    width: 100%;
}
table.event:last-of-type, table.facts { margin-bottom: 0; }
table.event th, table.facts th,
table.event td, table.facts td {
    text-align: left;
    vertical-align: top;
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid var(--ink);
}
table.event th, table.facts th {
    font-weight: normal;
    font-style: italic;
    white-space: nowrap;
    width: 7.5em;
}
table.event td, table.facts td { word-break: break-word; }
table.facts { margin-top: 18px; }

ul.city-list { list-style: none; margin: 0; padding: 0; }
ul.city-list li { border-bottom: 1px solid #000; }
/* the whole row is one link, so the hit area spans the column */
a.city-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* flush with the column edge, not inset */
    padding: 6px 0;
    color: #000;
    text-decoration: none;
}
a.city-row:visited { color: #000; }
a.city-row:hover .name { text-decoration: underline; }
ul.city-list .count { margin-left: auto; font-style: italic; text-align: right; }
/* The star's outer rays fade out, so its box sits flush but the bright core
   reads as indented. Pull it back a touch to line up with the text above. */
a.city-row svg.star { margin-left: -4px; }

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

#map {
    width: 100%;
    height: 460px;
    border: 1px solid #000;
    background: #fff;
}
/* Every city's star is the same size — the map says where, not how many. */
.map-star { width: 34px; height: 34px; cursor: pointer; }
.map-star svg { display: block; width: 100%; height: 100%; overflow: visible; }

#city-people { margin: 26px 0 0; }
/* the "click a star" prompt, before any city is picked */
#city-people > .empty { text-align: center; }
.city-posts { margin-top: 22px; }
.city-share { margin-top: 34px; }
.city-posts-head { margin-top: 0; }
.city-people-head { display: flex; align-items: center; gap: 14px; }
.city-people-star { flex: none; }
.city-people-star svg { width: 56px; height: 56px; }
.city-people-name { color: #000; }
.city-people-name:visited { color: #000; }
.city-people-count { margin: 2px 0 0; font-style: italic; }

.map-credit {
    margin-top: 6px;
    font-style: normal;
    font-size: 12px;
}
/* the global one-size rule matches `a` directly, so links have to be told
   to follow their paragraph down */
.map-credit a { font-size: inherit; }

.maplibregl-map { font-family: "Times New Roman", Times, serif; }

/* Zoom + / − : a white box with square, hairline black icons, held in from
   the corner. MapLibre's own stylesheet is loaded before ours (see head.ejs),
   so these win on cascade order rather than on !important. */
.maplibregl-ctrl-top-right { top: 6px; right: 6px; }
.maplibregl-ctrl-group {
    margin: 0;
    background: #fff;
    border: 1px solid #000;
    border-radius: 6px;
    box-shadow: none;
    overflow: hidden;
}
.maplibregl-ctrl-group:not(:empty) { box-shadow: none; }
.maplibregl-ctrl-group button,
.maplibregl-ctrl-group button:first-child,
.maplibregl-ctrl-group button:last-child,
.maplibregl-ctrl-group button:only-child {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
/* The divider needs to outrank the `border: none` on :last-child above —
   :not(:first-child) buys it the extra specificity to survive. */
.maplibregl-ctrl-group button + button:not(:first-child) { border-top: 1px solid #000; }
.maplibregl-ctrl-group button:not(:disabled):hover { background: transparent; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none;
}
/* Square-ended strokes, no rounding, thin. */
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%23000000' stroke-width='1' stroke-linecap='butt'/%3E%3C/svg%3E");
}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M8 14h12' stroke='%23000000' stroke-width='1' stroke-linecap='butt'/%3E%3C/svg%3E");
}

/* --- notifications + install bar ---------------------------------------- */

.push-line { margin: -20px 0 30px; }
button.push-toggle {
    border: 1px solid #000;
    border-radius: 999px;
    padding: 3px 14px;
    background: #fff;
    color: #000;
    text-decoration: none;
}
/* on = the CSS named colour forestgreen */
button.push-toggle[data-on="1"] {
    background: forestgreen;
    border-color: forestgreen;
    color: #fff;
}
button.push-toggle:disabled { border-style: dashed; }

/* sits along the bottom of the window until dismissed or installed */
#install-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #ffffcc;
    border-top: 1px solid #000;
}
#install-bar #install-text { flex: 1; }
#install-bar button {
    flex: none;
    color: #000;
}
#install-bar #install-do {
    border: 1px solid #000;
    border-radius: 999px;
    padding: 3px 14px;
    background: #fff;
    text-decoration: none;
}
#install-bar #install-dismiss { text-decoration: none; }

/* --- admin ------------------------------------------------------------- */

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}
table.admin-table th,
table.admin-table td {
    text-align: left;
    vertical-align: top;
    padding: 6px 8px;
    border-bottom: 1px solid #000;
}
table.admin-table th { font-style: italic; font-weight: normal; }
button.danger { color: #c00; }

/* --- narrow screens ---------------------------------------------------- */

@media (max-width: 600px) {
    body { padding: 0 14px 40px; }
    header#top { padding-top: 14px; padding-right: 76px; }
    #map { height: 58vh; min-height: 320px; }
    .profile-head { gap: 12px; }
    .profile-head .big-star svg { width: 64px; height: 64px; }
    .byline time { margin-left: 0; }
}

/* --- language select ---------------------------------------------------- */

/* Same chip as the year select on the 2026 page. */
.lang-form {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
}
#lang-select {
    font-family: 'Arial', Times, serif;
    font-size: 11px;
    color: #000;
    background-color: #f7f7f7;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 1px 3px;
    width: auto;
    cursor: pointer;
    -webkit-appearance: menulist;
    appearance: menulist;
}

/* Urdu reads right to left; flip the page and mirror the few things that
   are explicitly ordered. */
[dir="rtl"] .byline time { margin-left: 0; margin-right: auto; }
[dir="rtl"] .share-bottom button[type="submit"] { margin-left: 0; margin-right: auto; }
[dir="rtl"] ul.city-list .count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .from-city svg.star { margin-right: 0; margin-left: 4px; }