/* ==========================================================================
   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%;
  min-width: 540px;
  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);
}

.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. Both names rendered in the same
     cyan, so six cards looked identical and the model could only be learned by
     reading each one. Each model now carries its own accent, and the groups are
     set apart by a wider gap than the one between cards of the same model. */
  .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='deepseek-flash'] .price-model {
    color: var(--pz-cyan);
  }

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

  .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 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    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;
  }
}