/*
 * বিদ্যুৎ — the electricity pages.
 *
 * A sibling of market.css and built on the same tokens: one headline number
 * with the reporting behind it beside it, a board of districts, and a trend
 * that leaves gaps where nobody reported rather than drawing a zero.
 *
 * Amber rather than the market's own colour, because this section is about
 * an outage and the palette already reserves red for danger and green for
 * the platform's own voice.
 */

/* ------------------------------------------------------------- headline */

.pwr-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 1.5rem;
    padding: 1.5rem;
    background:
        radial-gradient(600px 200px at 0% 0%, rgba(202, 138, 4, .10), transparent 65%),
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.pwr-head__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #a16207;
}
.pwr-head__eyebrow i { font-size: .8rem; }

/* Tabular figures so the digits do not shuffle sideways as the hours change. */
.pwr-value {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .75rem;
    margin-top: .5rem;
}
.pwr-value b {
    font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.pwr-value__unit { font-size: .95rem; color: var(--muted); font-weight: 600; }

.pwr-move {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .6rem; border-radius: 999px;
    font-size: .85rem; font-weight: 700;
}
.pwr-move--up { background: var(--red-100); color: var(--red-600); }
.pwr-move--down { background: var(--green-100); color: var(--green-700); }
.pwr-move--flat { background: var(--line-soft); color: var(--muted); }

.pwr-head__note { font-size: .88rem; color: var(--ink-2); margin: .6rem 0 0; max-width: 52ch; }

/* --------------------------------------------------------- data health */

/* How much the reader should trust the figure beside it. This is the piece
   most pages leave out, and the reason this one can be believed. */
.pwr-trust {
    align-self: start;
    padding: .9rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.pwr-trust__pill {
    display: inline-block; padding: .15rem .6rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700;
}
.pwr-trust__pill--green { background: var(--green-100); color: var(--green-800); }
.pwr-trust__pill--amber { background: var(--amber-100); color: var(--notice-ink, #92400e); }
.pwr-trust__pill--grey { background: var(--line-soft); color: var(--muted); }

.pwr-trust__rows {
    display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .7rem;
    font-size: .85rem; color: var(--muted);
}
.pwr-trust__rows b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ your area */

.pwr-tools { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; }

.pwr-area-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.pwr-area-form select, .pwr-area-form input { flex: 1 1 160px; width: auto; }

.pwr-area { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1rem; align-items: flex-start; }
.pwr-area__big { display: flex; flex-direction: column; gap: .1rem; }
.pwr-area__big b {
    font-size: 1.8rem; font-weight: 800; line-height: 1.15;
    font-variant-numeric: tabular-nums; color: var(--green-700);
}

.pwr-facts { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; }
.pwr-facts li {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .25rem 0; font-size: .88rem; border-bottom: 1px solid var(--line-soft);
}
.pwr-facts li:last-child { border-bottom: 0; }
.pwr-facts li span { color: var(--muted); }
.pwr-facts li b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- trend */

.pwr-chart { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.pwr-chart__col {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end; height: 100%; gap: .25rem; min-width: 0;
}
.pwr-chart__bar {
    display: block; width: 100%; border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #eab308, #ca8a04);
}
/* A day nobody reported: an outline, not a bar of zero hours. */
.pwr-chart__gap {
    display: block; width: 100%; height: 6px; border-radius: 3px;
    background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.pwr-chart__col small { font-size: .62rem; color: var(--muted); }

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

.pwr-board { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pwr-board th {
    padding: .55rem .8rem; text-align: start;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.pwr-board td { padding: .65rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.pwr-board tbody tr:hover { background: var(--green-50); }
.pwr-board .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pwr-board__name a { font-weight: 700; color: var(--ink); }
.pwr-board__name a:hover { color: var(--green-700); }

.pwr-delta { font-weight: 800; font-variant-numeric: tabular-nums; }
.pwr-delta--up { color: var(--red-600); }
.pwr-delta--down { color: var(--green-700); }
.pwr-delta--flat { color: var(--muted); }

/* --------------------------------------------------------------- latest */

.pwr-latest { display: flex; align-items: flex-start; gap: .75rem; }
.pwr-latest + .pwr-latest { border-top: 1px solid var(--line-soft); padding-top: .75rem; }
.pwr-latest__hours {
    flex: none; min-width: 84px; padding: .3rem .5rem; border-radius: var(--radius-sm);
    background: var(--amber-100); color: var(--notice-ink, #92400e);
    font-size: .82rem; font-weight: 700; text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 900px) {
    .pwr-head { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
}

@media (max-width: 620px) {
    .pwr-head { padding: 1rem; }
    .pwr-tools { margin-inline-start: 0; width: 100%; }
    .pwr-tools form, .pwr-tools .btn { flex: 1; }
    .pwr-area__big b { font-size: 1.5rem; }
    .pwr-chart { height: 120px; }
    .pwr-chart__col small { font-size: .58rem; }

    /* The board keeps its columns and scrolls, rather than collapsing into
       something that can no longer be compared down a column. */
    .pwr-board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pwr-board { min-width: 560px; }
}