/* Ported and trimmed from spot-price-viewer's src/public/css/style.css:
   dropped the settings-panel/date-picker rules (.control, .field.has-addons,
   input[type=date], #toggle-settings, .header-actions/.header-buttons/
   .header-info/.header-meta) and the two-face-only rules (.clock-face-half,
   .clock-center-label, .clock-center-half, the non-rolling .clock-face
   sizing) — vartit has no settings panel, no date picker, and only ever
   renders the rolling clock face. Everything else (clock geometry colors,
   table, periods, summary, mobile layout) is unchanged. */

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * Traffic-light price colors: cheap/medium/expensive, each with a light
 * tint (row/card backgrounds) and a mid step (borders/accents). Validated
 * colorblind-safe (deutan/protan CVD delta >= 8) so red and green stay
 * distinguishable even for red-green color blindness, not just by hue.
 */
:root {
    --price-cheap: #12a08a;
    --price-cheap-tint: #e7f6f3;
    --price-cheap-border: #acded6;

    --price-medium: #eb9c00;
    --price-medium-tint: #fdf5e6;
    --price-medium-border: #f8dca6;

    --price-expensive: #d85a4a;
    --price-expensive-tint: #fbefed;
    --price-expensive-border: #f1c5c0;

    --ink: #1a1a1a;
}

body {
    margin: 0;
    padding: 40px;
    background: #eef1f4;
    font-family: Arial, Helvetica, sans-serif;
    /* A genuinely extreme price bar in the clock draws past its SVG box
       (overflow: visible) and can reach beyond the page width — clip it
       at the viewport edge rather than letting it add horizontal scroll. */
    overflow-x: hidden;
}

.container {
    max-width: 760px;
    margin: auto;
    padding: 2rem;
    background: rgba(255, 255, 255, .82);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.title {
    margin: 0;
    line-height: 1.;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin: .25rem 0 1rem;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

.nowrap {
    white-space: nowrap;
}

/* ==========================================================================
   Information
   ========================================================================== */

.info {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: .75rem;
}

.info-title {
    margin: 0 0 1.5rem;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.info-card {
    padding: 1.25rem;
    background: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: .75rem;
}

.info-item {
    margin-bottom: 1.5rem;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-label {
    margin-bottom: .35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

.info-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #333;
}

.info-help {
    margin-top: .35rem;
    font-size: .95rem;
    color: #666;
}

/* ==========================================================================
   Header — one slim row: weekday, current price, flag-only language select.
   Replaced a taller two-tier design (a 2rem weekday line + a separate
   "Now"/"Next" summary box below it) that took too much vertical space for
   what it actually shows.
   ========================================================================== */

.header-box {
    padding: .55rem .8rem;
}

.header-row {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.header-weekday {
    font-size: 1.1rem;
    font-weight: 700;
    color: #65728d;
    white-space: nowrap;
}

.header-price {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: .3rem;
    min-width: 0;
    padding: .3rem .6rem;
    border-radius: 8px;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-price-cheap {
    background: var(--price-cheap-tint);
}

.header-price-medium {
    background: var(--price-medium-tint);
}

.header-price-expensive {
    background: var(--price-expensive-tint);
}

.header-price-unit {
    font-size: .8em;
    color: #666;
}

/* Flag-only: the <option>/<select> content is just the emoji, so the
   closed control is already as narrow as the glyph — this just trims the
   native chrome around it down to match. */
.header-lang {
    flex: 0 0 auto;
    padding: .1rem .2rem;
    font-size: 1.2rem;
    line-height: 1;
    border: 1px solid #d8dde3;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

/* ==========================================================================
   Price clock — the rolling dial. Each quarter-hour is a radial bar on a
   FIXED, absolute price scale (0/5/10/15/20 c/kWh gridlines,
   .clock-price-ring below) — bulging outward for pricier quarters, pinching
   inward toward the center for cheaper/negative ones — colored by price
   class. Deliberately unbounded past the top ring: a genuinely extreme
   price overlaps the hour numbers and spills past the viewBox edge (see
   .clock-svg overflow). See shared/clockFace.js.
   ========================================================================== */

.clock-section {
    margin-top: 1.5rem;
}

.clock-faces {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-top: .75rem;
}

.clock-face-rolling {
    flex-basis: 360px;
    max-width: 360px;
}

/* The dial + arrow fit inside the viewBox with a little margin; a
   genuinely extreme price bar reaches past it, and `overflow: visible`
   lets that bar draw rather than getting clipped at the box edge. */
.clock-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.clock-face-title {
    margin: 0 0 .35rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
}

/* The disc behind the ring/numbers — makes each face read as one coloured
   object rather than a ring floating on the page background. */
.clock-face-bg {
    fill: #eef1f4;
    stroke: #d8dde3;
    stroke-width: 2;
}

/* The night/day background — annuli from the clear centre disc out to the
   face edge. A fade, not an on/off: shared/clockFace.js emits many thin
   arcs, each this same night colour at a per-arc `fill-opacity` that ramps
   0->1 across the twilight either side of sunrise/sunset. */
.clock-band-night {
    fill: #333a4d;
}

/* The no-price-data "tolerance" sector (see shared/clockFace.js#buildRolling's
   `gap`): a visible diagonal hatch instead of either a price bar or the
   night/day background, so a real gap reads as a deliberate state rather
   than nothing having rendered. */
.clock-gap {
    fill: url(#clock-gap-hatch);
}

.clock-gap-hatch-bg {
    fill: #eef1f4;
}

.clock-gap-hatch-line {
    stroke: #c3c9d2;
    stroke-width: 2;
}

.clock-star {
    fill: #ffffff;
    fill-opacity: .8;
}

/* Fixed, absolute price gridlines (0/5/10/15/20 c/kWh) — same radii every
   day, so a bar's rough price reads at a glance. */
.clock-price-ring {
    fill: none;
    stroke: #b9c0cb;
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.clock-price-ring-label {
    font-size: 9px;
    font-weight: 700;
    fill: #6b7482;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 2px;
    stroke-linejoin: round;
}

.clock-sector {
    stroke: #fff;
    stroke-width: 1;
}

/* Rolling dial: the separator — a red dashed "cut here" perforation line
   at the far edge of the drawn data, running across the face. */
.clock-seam {
    stroke: #e0342a;
    stroke-width: 1.6;
    stroke-dasharray: 4 2.5;
    pointer-events: none;
}

.clock-seam-label {
    font-size: 11px;
    font-weight: 700;
    fill: #4b5563;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 2.5px;
    stroke-linejoin: round;
}

.clock-cheap {
    fill: var(--price-cheap);
}

.clock-medium {
    fill: var(--price-medium);
}

.clock-expensive {
    fill: var(--price-expensive);
}

.clock-unknown {
    fill: #e2e6eb;
}

.clock-tick {
    stroke-width: 1.5;
}

.clock-tick-day {
    stroke: var(--ink);
    stroke-opacity: .25;
}

.clock-tick-night {
    stroke: #fff;
    stroke-opacity: .5;
}

.clock-number {
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
}

.clock-number-day {
    fill: var(--ink);
}

.clock-number-night {
    fill: #f1f2f6;
}

/* "12" on the dial is drawn as a sun (noon) or moon (midnight) instead of
   the number. The moon is drawn at the date's real lunar phase (see
   shared/moonPhase.js). */
.clock-daymark-sun {
    fill: #f7c600;
    stroke: #c99700;
    stroke-width: .5;
}

.clock-daymark-rays {
    fill: none;
    stroke: #e8ab00;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.clock-daymark-moon {
    fill: #f4ecc0;
    stroke: none;
}

.clock-daymark-moondisc {
    fill: none;
    stroke: #f4ecc0;
    stroke-opacity: .3;
    stroke-width: .8;
}

/* The current hour's own 4 quarters as a small solid pie in the clear
   centre disc (see shared/clockFace.js's centerPie). */
.clock-center-pie {
    stroke: #fff;
    stroke-width: 1;
}

/* Points radially inward at the current quarter-hour's sector. */
.clock-arrow {
    fill: var(--ink);
}

/* ==========================================================================
   Price table
   ========================================================================== */

.table-box {
    padding: .5rem;
}

table {
    border-collapse: separate;
    border-spacing: 2px;
}

th,
td {
    border: 1px solid #d8dde3;
    border-radius: 6px;
    padding: 6px 10px;
    text-align: right;
}

th:first-child,
td:first-child {
    text-align: center;
}

.table .cheap {
    background: var(--price-cheap);
    color: var(--ink);
}

.table .medium {
    background: var(--price-medium);
    color: var(--ink);
}

.table .expensive {
    background: var(--price-expensive);
    color: var(--ink);
}

th.hour,
td.hour {
    width: 3rem;
    min-width: 3rem;
    text-align: center;
    font-weight: bold;
}

td.price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Each day is its own native <details>/<summary> — collapsed by default
   except today, so the full quarter-hour data stays in the page without
   forcing a long scroll past days the reader didn't ask for. */
.table-days {
    margin-top: .5rem;
}

.table-day + .table-day {
    margin-top: .5rem;
}

.table-day-summary {
    cursor: pointer;
    list-style: none;
    padding: .6rem 1rem;
    background: #dfe6ef;
    border-radius: 8px;
    font-weight: 700;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-day-summary::-webkit-details-marker {
    display: none;
}

.table-day-summary::after {
    content: "▸";
    margin-left: .75rem;
    transition: transform .15s ease;
    color: #777;
}

.table-day[open] > .table-day-summary::after {
    transform: rotate(90deg);
}

.table-day .table-box {
    margin-top: .5rem;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {

    body {
        padding: 0;
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: .75rem;
    }

    .table-box {
        padding: 0;
    }

    .clock-face-rolling {
        max-width: 420px;
    }

    th,
    td {
        padding: 4px 6px;
    }

    .page-title {
        min-height: 3rem;
        margin: .1rem 0 1rem;
    }

    .info {
        margin-top: 1rem;
        padding: 1rem;
    }

    .info-title {
        margin-bottom: 1rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-card {
        padding: 1rem 0.25rem;
    }

    .info-item {
        margin-bottom: 1.25rem;
    }

    .info-value {
        font-size: 1.25rem;
    }
}