/* ==========================================================================
   DeepSeek peak/off-peak clock — projectzero.cl brand styling.
   Mobile-first, dark theme, glassmorphism over a subtle grid + glow.
   ========================================================================== */

:root {
  /* Brand tokens (projectzero.cl) */
  --pz-dark: #0a0a0f;
  --pz-dark-secondary: #12121a;
  --pz-cyan: #00ffff;
  --pz-purple: #8b00ff;
  --pz-purple-deep: #4a0080;
  --pz-glass: rgba(255, 255, 255, .05);

  /* Derived surface + text tokens */
  --pz-text: #eaeaf4;
  --pz-text-muted: #a2a2ba;
  --pz-border: rgba(255, 255, 255, .1);
  --pz-border-strong: rgba(255, 255, 255, .18);
  --pz-cyan-soft: rgba(0, 255, 255, .12);
  --pz-purple-soft: rgba(139, 0, 255, .18);
  --pz-purple-light: #cba8ff;
  --pz-warn: #ffb86b;
  --pz-warn-soft: rgba(255, 184, 107, .1);

  /* Typography scale */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --step--1: clamp(.78rem, .74rem + .2vw, .875rem);
  --step-0: clamp(.94rem, .9rem + .25vw, 1.05rem);
  --step-1: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);

  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1160px;
  --shadow: 0 26px 60px -32px rgba(0, 0, 0, .95);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--pz-text);
  background-color: var(--pz-dark);
  background-image:
    radial-gradient(circle at 12% -12%, rgba(139, 0, 255, .24), transparent 55%),
    radial-gradient(circle at 92% -6%, rgba(0, 255, 255, .14), transparent 46%);
  background-attachment: fixed;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Fixed grid overlay, faded towards the bottom. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% -10%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% -10%, #000 0%, transparent 78%);
}

body > * {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--pz-cyan);
}

a:hover {
  color: var(--pz-purple-light);
}

:focus-visible {
  outline: 2px solid var(--pz-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.15rem;
}

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: .7rem 1.1rem;
  border-radius: 0 0 12px 12px;
  background: var(--pz-dark-secondary);
  border: 1px solid var(--pz-cyan);
  color: var(--pz-cyan);
  text-decoration: none;
  transition: top .18s ease;
}

.skip-link:focus {
  top: 0;
}

.muted {
  color: var(--pz-text-muted);
}

/* --------------------------------------------------------------------------
   Glass surface
   -------------------------------------------------------------------------- */

.glass {
  background: var(--pz-glass);
  border: 1px solid var(--pz-border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.card {
  padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   Header + hero
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--pz-border);
  background: linear-gradient(to bottom, rgba(10, 10, 15, .9), rgba(10, 10, 15, .35));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-block: .9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  /* Padding, not a bigger logo: it lifts the tap target from 36px to the 44px
     touch minimum without changing how the banner looks. Measured at 320-414px
     the whole link was 142x36 before this. */
  padding-block: .25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

/* Logo tile, mirroring the projectzero.cl header: square, rounded, cyan glow. */
.brand-logo {
  flex: none;
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--pz-border), 0 8px 20px -10px rgba(0, 255, 255, .5);
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wordmark gradient as used on projectzero.cl: a cyan "Zero". The gradient
   values are copied from that site's stylesheet rather than approximated. */
.brand-zero {
  background: linear-gradient(135deg, var(--pz-cyan) 0%, #00cccc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* On hover the logo tile shifts to a purple glow, as it does on projectzero.cl.
   The wordmark deliberately stays cyan: that site swaps it to a #8b00ff ->
   #4a0080 gradient, which measures 3.33:1 and 1.51:1 against this background
   and would leave the text unreadable. Readability beats pixel-fidelity. */
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  box-shadow: 0 0 0 1px var(--pz-border), 0 8px 20px -10px rgba(139, 0, 255, .6);
}

.kicker {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pz-text-muted);
}

main {
  display: grid;
  /* minmax(0, 1fr) instead of an implicit `auto` track. An auto track refuses to
     shrink below its items' min-content width, and the price table carries a
     540px min-width, which forced the whole layout 225px wider than a 375px
     phone. Every section was pushed off-screen, and .table-wrapper's own
     overflow-x: auto was dead code because there was never anything to scroll
     inside. The track has to be allowed to shrink for the table to scroll. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 2rem 3rem;
}

/* Grid items default to min-width: auto, which would let wide content push a
   track back out even after the track itself is allowed to shrink. */
main > * {
  min-width: 0;
}

.hero {
  max-width: 62ch;
}

h1 {
  font-size: var(--step-3);
  background: linear-gradient(100deg, #ffffff 10%, var(--pz-cyan) 55%, var(--pz-purple-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin-top: 1rem;
  font-size: var(--step-1);
  color: var(--pz-text-muted);
  font-weight: 400;
}

.lede.small {
  font-size: var(--step-0);
  margin-bottom: 1rem;
}

.section-title {
  font-size: var(--step-1);
  margin-bottom: 1rem;
}

.section-title::after {
  content: '';
  display: block;
  width: 2.6rem;
  height: 2px;
  margin-top: .6rem;
  background: linear-gradient(90deg, var(--pz-cyan), transparent);
}

/* --------------------------------------------------------------------------
   Status
   -------------------------------------------------------------------------- */

.status-card {
  position: relative;
  overflow: hidden;
}

.status-card::after {
  content: '';
  position: absolute;
  inset: -40% 40% auto -10%;
  height: 60%;
  background: radial-gradient(circle, rgba(139, 0, 255, .22), transparent 70%);
  pointer-events: none;
}

.status-line {
  margin-bottom: .75rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--pz-border-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--pz-text);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: .07em;
}

.status-badge::before {
  content: '';
  width: .68rem;
  height: .68rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  flex: none;
}

.status-badge[data-status='peak'] {
  color: var(--pz-purple-light);
  border-color: rgba(139, 0, 255, .6);
  background: var(--pz-purple-soft);
}

.status-badge[data-status='offpeak'] {
  color: var(--pz-cyan);
  border-color: rgba(0, 255, 255, .5);
  background: var(--pz-cyan-soft);
}

.status-detail {
  max-width: 64ch;
  color: var(--pz-text-muted);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: .85rem;
  margin: 1.4rem 0 0;
}

.metric {
  padding: .85rem 1rem;
  border: 1px solid var(--pz-border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .03);
}

.metric dt {
  font-size: var(--step--1);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pz-text-muted);
}

.metric-value {
  margin: .35rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Timezone field + windows
   -------------------------------------------------------------------------- */

.field {
  display: grid;
  gap: .45rem;
}

.field label {
  font-size: var(--step--1);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pz-text-muted);
}

select {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--pz-border-strong);
  background-color: var(--pz-dark-secondary);
  color: var(--pz-text);
  font: inherit;
  font-size: var(--step-0);
}

select:hover {
  border-color: var(--pz-cyan);
}

.windows {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.window-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .9rem;
  padding: .75rem .95rem;
  border: 1px solid var(--pz-border);
  border-radius: var(--radius-sm);
  background: rgba(0, 255, 255, .04);
}

.window-utc {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pz-cyan);
  font-variant-numeric: tabular-nums;
}

.window-local {
  color: var(--pz-text);
  font-variant-numeric: tabular-nums;
}

.hint {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--pz-text-muted);
}

/* --------------------------------------------------------------------------
   Price table
   -------------------------------------------------------------------------- */

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.price-table {
  width: 100%;
  /* No min-width. It used to be 540px, which never bound below 1024px and only
     ever bit above it, where the two-column layout leaves this card about 533px.
     There it forced a horizontal scrollbar for the sake of 7px. Letting the
     table shrink to its container is what removes the scrollbar. */
  border-collapse: collapse;
  font-size: var(--step-0);
}

.price-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: .75rem;
  font-size: var(--step--1);
  color: var(--pz-text-muted);
}

.price-table th,
.price-table td {
  padding: .7rem .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  vertical-align: top;
}

.price-table thead th {
  text-align: right;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pz-text-muted);
  border-bottom-color: var(--pz-border-strong);
  white-space: nowrap;
}

.price-table thead th:first-child {
  text-align: left;
}

.price-table th[scope='row'] {
  text-align: left;
  font-weight: 500;
}

.price-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-model {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pz-cyan);
}

/* The API identifier, kept visible next to the official model name: the name is
   what you read, the id is what you actually send as `model` in a request. */
.price-api {
  display: block;
  margin-top: .1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .01em;
  color: var(--pz-text-muted);
}

/* Each model carries its own accent so the two can be told apart at a glance, at
   every screen size. They previously rendered in the same cyan, which left the
   grouping invisible. */
.price-table tbody[data-model='deepseek-flash'] .price-model {
  color: var(--pz-cyan);
}

.price-table tbody[data-model='deepseek-v4-pro'] .price-model {
  color: var(--pz-purple-light);
}

/* In the tabular layout the accent rides on the model cell, drawn as an inset
   shadow so it cannot alter the column widths. The stacked layout below 641px
   puts the accent on the card itself instead. */
@media (min-width: 641px) {
  .price-table tbody[data-model='deepseek-flash'] th[scope='row'] {
    box-shadow: inset 3px 0 0 var(--pz-cyan);
  }

  .price-table tbody[data-model='deepseek-v4-pro'] th[scope='row'] {
    box-shadow: inset 3px 0 0 var(--pz-purple);
  }

  /* A firmer rule between the two models than between rows of one model. */
  .price-table tbody + tbody tr:first-child th,
  .price-table tbody + tbody tr:first-child td {
    border-top: 1px solid var(--pz-border-strong);
  }

  /* Let the two price columns drop to their content width so the model column
     keeps the remainder. Without this the browser spread the leftover space
     evenly and the category wrapped to two lines at the tightest desktop widths.
     Scoped to the tabular layout on purpose: in the stacked layout these cells
     are display: block, where a width of 1% would collapse them. */
  .price-table thead th[data-window],
  .price-table td.price-cell {
    width: 1%;
  }
}

.price-cat {
  display: block;
  font-size: var(--step--1);
  color: var(--pz-text-muted);
}

.current-tag {
  display: block;
  margin-top: .3rem;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--pz-text);
}

.price-table[data-current='peak'] .is-current {
  background: var(--pz-purple-soft);
  box-shadow: inset 0 0 0 1px rgba(139, 0, 255, .4);
}

.price-table[data-current='offpeak'] .is-current {
  background: var(--pz-cyan-soft);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 255, .32);
}

/* Stacked cards on narrow screens. Below roughly 640px the three-column table
   cannot fit: measured at 375px the wrapper was 296px against a 540px table, so
   a phone user saw only the model column and had to scroll sideways to read any
   price at all — the one thing this tool exists to show. */
@media (max-width: 640px) {

  .price-table {
    min-width: 0;
  }

  .price-table,
  .price-table caption,
  .price-table thead,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td {
    display: block;
  }

  /* Column headers are replaced by the per-cell labels below. */
  .price-table thead {
    display: none;
  }

  .price-table tr {
    margin-bottom: .85rem;
    padding: .8rem .9rem;
    border: 1px solid var(--pz-border);
    border-radius: var(--radius-sm);
  }

  .price-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .price-table th[scope='row'],
  .price-table td {
    padding: 0;
    border-bottom: 0;
  }

  .price-table th[scope='row'] {
    margin-bottom: .5rem;
  }

  .price-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem .5rem;
    border-radius: 6px;
  }

  .price-table td::before {
    font-size: var(--step--1);
    color: var(--pz-text-muted);
  }

  .price-table td[data-window='offpeak']::before {
    content: 'Off-peak';
  }

  .price-table td[data-window='peak']::before {
    content: 'Peak';
  }

  /* The current window is spelled out, not signalled by colour alone: the
     thead that used to carry a "Ventana actual" tag is hidden here. */
  .price-table td.is-current[data-window='offpeak']::before {
    content: 'Off-peak · vigente';
    color: var(--pz-cyan);
  }

  .price-table td.is-current[data-window='peak']::before {
    content: 'Peak · vigente';
    color: var(--pz-purple-light);
  }

  /* Tell the two models apart at a glance. Each model carries its own accent,
     and the groups are set apart by a wider gap than the one between cards of
     the same model. The colour of the model name itself is set globally, above,
     so it holds in the tabular layout too. */
  .price-table tbody[data-model='deepseek-flash'] tr {
    border-left: 3px solid var(--pz-cyan);
  }

  .price-table tbody[data-model='deepseek-v4-pro'] tr {
    border-left: 3px solid var(--pz-purple);
  }

  .price-table tbody[data-model] .price-model {
    font-weight: 700;
  }

  .price-table tbody + tbody tr:first-child {
    margin-top: 1.75rem;
  }
}

.note {
  margin-top: 1.15rem;
  font-size: var(--step--1);
  color: var(--pz-text-muted);
}

/* --------------------------------------------------------------------------
   Holiday notice
   -------------------------------------------------------------------------- */

.notice {
  border-color: rgba(255, 184, 107, .45);
  background: var(--pz-warn-soft);
}

.notice .section-title {
  color: var(--pz-warn);
}

.notice .section-title::after {
  background: linear-gradient(90deg, var(--pz-warn), transparent);
}

.notice p {
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--pz-border);
  padding-block: 1.75rem;
  font-size: var(--step--1);
  color: var(--pz-text-muted);
}

.site-footer .container {
  display: grid;
  gap: .4rem;
}

/* Slightly brighter than the rest of the footer: the disclaimer should be read,
   not skimmed past. */
.disclaimer {
  color: var(--pz-text);
}

/* --------------------------------------------------------------------------
   Larger viewports
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .card {
    padding: 1.6rem;
  }

  main {
    /* The price table is the wider of the two cards: three columns of figures,
       plus model names long enough to wrap. At 1.15fr it got about 452px and the
       category labels wrapped to two lines between roughly 1024 and 1085px.
       Measured at 1.35fr the wrapping disappears at every tested width and the
       windows card still has room to spare. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 1.75rem;
  }

  .hero,
  .status-card,
  .notice {
    grid-column: 1 / -1;
  }

  .metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}