/* 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; }

/* ---- live-page bar (_LivePageBar.cshtml) ----
   The /traffic header - round back button, title, round share button - so /power and
   /report read as the same family of live pages. Values mirror SxmTraffic.cshtml. */
.live-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.live-bar h1 {
    flex: 1;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
}
.live-bar-back,
.live-bar-share {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    text-decoration: none;
}
.live-bar-back { color: var(--iig-text, #1a1a2e); }
.live-bar-back:hover { background: #e5e7eb; }
.live-bar-share { border: 0; color: #7C3AED; cursor: pointer; transition: background .2s; }
.live-bar-share:hover { background: #F5F3FF; }
.live-bar-share[hidden] { display: none; }
.live-bar-share--done { background: #F5F3FF; }

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

/* One way in to reporting, above the map. */
.power-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 2rem;
}
.power-action {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    background: #fff;
    color: #1f2937;
    font-weight: 600;
    text-decoration: none;
}
.power-action .dn-ico { width: 18px; height: 18px; }
.power-action:hover { background: #f3f4f6; }
.power-action--primary { background: #1f2937; border-color: #1f2937; color: #fff; }
.power-action--primary:hover { background: #111827; }

.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; }

/* ---- 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-action { background: #111827; border-color: #374151; color: #e5e7eb; }
    .power-action:hover { background: #1f2937; }
    .power-action--primary { background: #e5e7eb; border-color: #e5e7eb; color: #111827; }
    .report-choice, .report-select, .report-note { background: #111827; border-color: #374151; color: #e5e7eb; }
    .report-choice:hover { background: #1f2937; }
    .report-choice-hint, .report-fineprint { color: #9ca3af; }
    .power-privacy { border-top-color: #374151; }
}

/* ---------------------------------------------------------------------------
   /report - pick a kind, then say where

   Big tap targets: this is used one-handed, often in the dark, sometimes by
   somebody standing next to the thing they are reporting.
   --------------------------------------------------------------------------- */

.report-page { padding-block: 1.5rem 3rem; max-width: 40rem; }

.report-lede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.5;
}
.report-lede-ico { width: 22px; height: 22px; flex: none; }
.report-change { margin-left: auto; font-size: .875rem; font-weight: 600; }

.report-choices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .6rem;
}
.report-choice {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.5rem;
    padding: .75rem .9rem;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.report-choice:hover,
.report-choice:focus-visible { background: #f9fafb; border-color: #d1d5db; }
.report-choice-ico { width: 24px; height: 24px; flex: none; color: #4b5563; }
.report-choice--power_out .report-choice-ico,
.report-choice--water_outage .report-choice-ico,
.report-choice--traffic_accident .report-choice-ico { color: #b91c1c; }
.report-choice-text { display: flex; flex-direction: column; min-width: 0; }
.report-choice-label { font-weight: 600; }
.report-choice-hint { font-size: .8125rem; color: #6b7280; }

.report-more { margin: 1rem 0 0; font-size: .9375rem; }
.report-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1.5rem 0 0; font-size: .9375rem; font-weight: 600; }

.report-form { display: flex; flex-direction: column; gap: .5rem; }
.report-field-label { margin-top: .5rem; font-weight: 600; }
.report-optional { font-weight: 400; color: #6b7280; }

.report-locate { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.report-locate[hidden] { display: none; }
.report-locate-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    background: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.report-locate-btn .dn-ico { width: 18px; height: 18px; }
.report-locate-btn--done { border-color: #15803d; color: #15803d; }
.report-locate-status { font-size: .875rem; color: #4b5563; }

.report-select,
.report-note {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    background: #fff;
    font: inherit;
}
.report-note { resize: vertical; }

.report-submit {
    margin-top: .75rem;
    padding: .8rem 1rem;
    border: 0;
    border-radius: .5rem;
    background: #1f2937;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.report-submit:hover { background: #111827; }

.report-fineprint { margin: .25rem 0 0; font-size: .8125rem; color: #6b7280; }

/* ---------------------------------------------------------------------------
   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; }
}