/* Island Reports — /power and the incident surfaces.
 *
 * The grid is the page. It has to be readable at a glance, on a phone, in the dark,
 * by somebody whose power is out — so state is carried by a word AND a colour AND a
 * left border, never by colour alone.
 */

.power-page { padding-block: 1.5rem 3rem; }

.power-head h1 { margin: 0 0 .5rem; }

.power-summary {
    font-size: 1.125rem;
    line-height: 1.55;
    max-width: 64ch;
    margin: 0 0 2rem;
}

.power-side { margin-bottom: 2rem; }
.power-side h2 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #4b5563;
}

.power-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
}

.power-cell {
    border: 1px solid #e5e7eb;
    border-left: 4px solid #d1d5db;
    border-radius: .5rem;
    padding: .75rem .9rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* Three states, three signals each: border colour, background, and the word in
   .power-state. Nobody has to distinguish a hue to read this. */
.power-cell--on       { border-left-color: #16a34a; }
.power-cell--reported { border-left-color: #d97706; background: #fffbeb; }
.power-cell--out      { border-left-color: #dc2626; background: #fef2f2; }

.power-district { font-weight: 600; }

.power-state { font-size: .9375rem; }
.power-cell--on .power-state       { color: #15803d; }
.power-cell--reported .power-state { color: #b45309; }
.power-cell--out .power-state      { color: #b91c1c; font-weight: 600; }

.power-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: .25rem;
    background: #b91c1c;
    color: #fff;
}

.power-since { font-size: .8125rem; color: #6b7280; }

.power-report-form { margin-top: .4rem; }

.power-report-btn {
    width: 100%;
    padding: .4rem .6rem;
    font-size: .875rem;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    background: #f9fafb;
    cursor: pointer;
}
.power-report-btn:hover { background: #f3f4f6; }

/* ---- ranking ---- */

.power-ranking { margin-top: 2.5rem; overflow-x: auto; }
.power-ranking-note { margin: 0 0 .75rem; font-size: .875rem; color: #6b7280; }

.power-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: .9375rem;
}
.power-table th,
.power-table td {
    text-align: left;
    padding: .5rem .75rem;
    border-bottom: 1px solid #e5e7eb;
}
.power-table thead th {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #4b5563;
    border-bottom-width: 2px;
}

/* ---- privacy note ----
   Deliberately not hidden behind a link. Somebody submitting an anonymous report
   deserves to see what that means without going looking for it. */
.power-privacy {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: .8125rem;
    color: #6b7280;
    max-width: 70ch;
}

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

@media (prefers-color-scheme: dark) {
    .power-cell { background: #111827; border-color: #374151; }
    .power-cell--reported { background: #1f1a0b; }
    .power-cell--out      { background: #1f1010; }
    .power-table th, .power-table td { border-bottom-color: #374151; }
    .power-report-btn { background: #1f2937; border-color: #374151; color: #e5e7eb; }
    .power-report-btn:hover { background: #374151; }
    .power-privacy { border-top-color: #374151; }
}

/* ---------------------------------------------------------------------------
   Correction intake ("Something wrong here?")

   Deliberately quiet. It appears next to every ship call and every flight, so
   anything louder than this would compete with the data it sits beside. Closed
   by default via <details>, which also means the textarea costs nothing until
   somebody actually opens one.
   --------------------------------------------------------------------------- */

.correction-intake {
    margin-top: .35rem;
    font-size: .8125rem;
}

.correction-intake-summary {
    cursor: pointer;
    color: var(--muted, #64748b);
    list-style: none;
}

.correction-intake-summary::-webkit-details-marker { display: none; }

.correction-intake-summary::before {
    content: "\2691";           /* flag */
    margin-right: .35em;
    opacity: .7;
}

.correction-intake-summary:hover,
.correction-intake-summary:focus-visible {
    color: var(--link, #0369a1);
    text-decoration: underline;
}

.correction-intake-form {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .4rem;
    padding: .6rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .5rem;
    background: var(--surface-2, #f8fafc);
}

.correction-intake-label {
    font-weight: 600;
}

.correction-intake-note {
    width: 100%;
    padding: .4rem;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: .375rem;
    font: inherit;
    resize: vertical;
}

.correction-intake-btn {
    align-self: flex-start;
    padding: .35rem .75rem;
    border: 0;
    border-radius: .375rem;
    background: var(--accent, #0f766e);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.correction-intake-btn:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------------------
   Post-submit acknowledgement (no-JavaScript path)
   --------------------------------------------------------------------------- */

.report-thanks {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-left: 3px solid var(--accent, #0f766e);
    border-radius: .375rem;
    background: var(--surface-2, #f0fdfa);
}

.report-thanks--refused {
    border-left-color: var(--warn, #b45309);
    background: var(--surface-warn, #fffbeb);
}

.report-thanks-line { margin: 0; font-weight: 600; }

.report-thanks-earn {
    margin: .35rem 0 0;
    font-size: .875rem;
    color: var(--muted, #475569);
}

/* ---------------------------------------------------------------------------
   Contributor board

   Deliberately plain: no medals, no tier badges, no podium. Civic points are a
   thank-you and never a currency, and dressing them up like the rewards
   leaderboard would invite exactly the comparison the two boards exist to
   avoid.
   --------------------------------------------------------------------------- */

.power-contributors { margin-top: 2rem; }

.power-contributors-note {
    margin: .35rem 0 .75rem;
    font-size: .875rem;
    color: var(--muted, #475569);
}

.power-contributors-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.power-contributors-list li {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: .5rem;
    align-items: baseline;
    padding: .35rem 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.power-contributor-rank { color: var(--muted, #94a3b8); font-variant-numeric: tabular-nums; }
.power-contributor-name { font-weight: 600; }
.power-contributor-points { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Alert opt-in

   Hidden until script confirms push is available, so a no-JavaScript visitor
   never sees a control that cannot work. Deliberately quiet: this sits below
   the answer somebody came for, and it is an offer rather than a prompt.
   --------------------------------------------------------------------------- */

.alert-subscribe {
    margin: 1.75rem 0 0;
    padding: 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: .5rem;
    background: var(--surface-2, #f8fafc);
}

.alert-subscribe-heading { margin: 0 0 .35rem; font-size: 1rem; }

.alert-subscribe-note,
.alert-subscribe-ios,
.alert-subscribe-privacy {
    margin: 0 0 .6rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--muted, #475569);
}

.alert-subscribe-privacy { margin-bottom: 0; font-size: .8125rem; }

.alert-subscribe-btn {
    padding: .45rem .9rem;
    border: 1px solid var(--accent, #0f766e);
    border-radius: .375rem;
    background: var(--accent, #0f766e);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.alert-subscribe-btn[data-state="on"] {
    background: transparent;
    color: var(--accent, #0f766e);
}

.alert-subscribe-btn:disabled { opacity: .6; cursor: default; }

.alert-subscribe-status:empty { display: none; }

.alert-subscribe-status {
    margin: .5rem 0 .6rem;
    font-size: .875rem;
    color: var(--muted, #334155);
}

/* ---------------------------------------------------------------------------
   Holidays this week (hub strip)

   Rendered only when there IS one, so it never appears as an empty box. Dates
   read as dates rather than as a countdown: "Monday 8 December" survives being
   cached, and is what somebody planning around a closure actually needs.
   --------------------------------------------------------------------------- */

.hub-holidays {
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
}

.hub-holidays-heading {
    margin: 0 0 .6rem;
    font-size: 1rem;
}

.hub-holidays-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .35rem;
}

.hub-holiday {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
}

.hub-holiday-date {
    min-width: 12rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted, #475569);
}

.hub-holiday-name { font-weight: 600; }

.hub-holidays-note {
    margin: .6rem 0 0;
    font-size: .8125rem;
    color: var(--muted, #64748b);
}

@media (max-width: 480px) {
    .hub-holiday { gap: 0 .5rem; }
    .hub-holiday-date { min-width: 100%; font-size: .8125rem; }
}