/* ===================================
   Dashboard CSS — Chromium 44 target
   No CSS vars, no clamp(), no Grid
   =================================== */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0d1512;
}

body {
  color: #f2efe6;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans CJK SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#dashboard-app,
.dashboard-viewport,
.dashboard-track,
.dashboard-page {
  width: 100%;
  height: 100%;
}

.dashboard-viewport {
  overflow: hidden;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.dashboard-track {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 240ms ease-out;
  transition: transform 240ms ease-out;
}

.dashboard-track.is-dragging {
  -webkit-transition: none;
  transition: none;
}

.dashboard-page {
  -webkit-flex: 0 0 100vw;
  -ms-flex: 0 0 100vw;
  flex: 0 0 100vw;
}

/* ============================
   Lock Screen (Page 0)
   ============================ */

.dashboard-page--lockscreen {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 0 24px 48px;
  background:
    radial-gradient(ellipse 140% 18% at 50% 92%, #1a2c22 0%, transparent 70%),
    radial-gradient(ellipse 100% 12% at 22% 88%, #15251c 0%, transparent 72%),
    radial-gradient(ellipse 90% 10% at 78% 90%, #1c3026 0%, transparent 70%),
    radial-gradient(ellipse 60% 8% at 50% 86%, #0f1d16 0%, transparent 68%),
    linear-gradient(180deg,
      #0a1a28 0%,
      #0c1e2e 20%,
      #162a32 40%,
      #1f3638 55%,
      #2e4236 68%,
      #3c4e34 78%,
      #5a5a36 88%,
      #6e5830 94%,
      #453a20 98%,
      #1a2c22 100%
    );
}

.lockscreen {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}

.lockscreen > * + * {
  margin-top: 8px;
}

.lockscreen__time {
  color: #f2efe6;
  font-size: 16vw;
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.lockscreen__seconds {
  margin-left: 0.04em;
  color: #daa048;
  font-size: 0.32em;
  font-weight: 300;
  letter-spacing: 0;
  vertical-align: baseline;
}

.lockscreen__meta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.lockscreen__date {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.lockscreen__date > * + * {
  margin-left: 10px;
}

.lockscreen__weekday {
  color: #c5beac;
  font-size: 3.0vw;
  font-weight: 500;
}

.lockscreen__ymd {
  color: #878472;
  font-size: 2.3vw;
}

.lockscreen__weather {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  text-align: right;
}

.lockscreen__weather > * + * {
  margin-left: 6px;
}

.lockscreen__weather-temp {
  color: #f2efe6;
  font-size: 3.8vw;
  font-weight: 600;
}

.lockscreen__weather-cond {
  color: #878472;
  font-size: 2.3vw;
}

/* ============================
   Widget Grid Pages (2, 3)
   absolute position fill
   page padding: top 16, sides 18, bottom 34, gap 12
   ============================ */

.dashboard-page--overview,
.dashboard-page--planning {
  position: relative;
  padding: 16px 18px 34px;
}

/* ---------- Overview: clock (l, 58%) | weather (r, 42%) | schedule (bottom, 53%) ---------- */

.dashboard-page--overview .widget-card--clock {
  position: absolute;
  top: 16px;
  left: 18px;
  right: calc(42% + 6px);
  bottom: calc(53% + 6px);
}

.dashboard-page--overview .widget-card--weather {
  position: absolute;
  top: 16px;
  left: calc(58% + 6px);
  right: 18px;
  bottom: calc(53% + 6px);
}

.dashboard-page--overview .widget-card--schedule {
  position: absolute;
  top: calc(47% + 22px);
  left: 18px;
  right: 18px;
  bottom: 34px;
}

/* ---------- Planning: stats (l, 50%) | todo (r, 50%) | countdown (bottom, 53%) ---------- */

.dashboard-page--planning .widget-card--stats {
  position: absolute;
  top: 16px;
  left: 18px;
  right: calc(50% + 6px);
  bottom: calc(53% + 6px);
}

.dashboard-page--planning .widget-card--todo {
  position: absolute;
  top: 16px;
  left: calc(50% + 6px);
  right: 18px;
  bottom: calc(53% + 6px);
}

.dashboard-page--planning .widget-card--countdown {
  position: absolute;
  top: calc(47% + 22px);
  left: 18px;
  right: 18px;
  bottom: 34px;
}

/* ============================
   Weather Detail Page (1)
   Scrollable, compact 3-card layout
   ============================ */

.dashboard-page--weatherdetail {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px 36px;
  -webkit-overflow-scrolling: touch;
}

.widget-card--weatherdetail {
  border: none;
  background: transparent;
}

/* ---- container ---- */

.wd-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.wd-container > * + * {
  margin-top: 8px;
}

.wd-sheet {
  border: 1px solid #2c3d33;
  border-radius: 6px;
  background: #182720;
  padding: 10px 12px;
}

.wd-section-label {
  color: #878472;
  font-size: 1.5vw;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

/* ====== Card 1: condition (left) + temp & alerts (right) ====== */

.wd-cond-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* left */
.wd-cond-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.wd-cond-left > * + * { margin-top: 2px; }

.wd-cond-city {
  color: #f2efe6;
  font-size: 3.2vw;
  font-weight: 600;
}

.wd-cond-time {
  color: #878472;
  font-size: 1.5vw;
}

.wd-cond-desc {
  color: #c5beac;
  font-size: 2vw;
}

.wd-cond-range {
  color: #c5beac;
  font-size: 1.8vw;
}

/* right */
.wd-cond-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  max-width: 58%;
}

.wd-cond-temp {
  color: #f2efe6;
  font-size: 13vw;
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.88;
}

/* alerts inside right column */
.wd-cond-alerts {
  margin-top: 6px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.wd-alert-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 4px;
}

.wd-alert-badge {
  display: inline-block;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 1.3vw;
  font-weight: 600;
  margin-right: 5px;
  white-space: nowrap;
}

.wd-alert-badge--warn { color: #e8b460; background: rgba(232, 180, 96, 0.18); }
.wd-alert-badge--info { color: #65b4c7; background: rgba(101, 180, 199, 0.18); }

.wd-alert-brief {
  color: #878472;
  font-size: 1.3vw;
  line-height: 1.3;
  text-align: right;
  max-width: 200px;
}

/* ====== Card 2: metrics + air, 4-column ====== */

.wd-metrics-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  margin-bottom: 6px;
}

.wd-metrics-label {
  color: #878472;
  font-size: 1.5vw;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.wd-metrics-aqi {
  color: #c5beac;
  font-size: 1.5vw;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.wd-aqi-num {
  color: #f2efe6;
  font-size: 2.1vw;
  font-weight: 700;
  margin: 0 3px;
}

.wd-aqi {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 1.4vw;
  font-weight: 600;
}

.wd-aqi--good     { color: #5fc767; background: rgba(95, 199, 103, 0.15); }
.wd-aqi--moderate { color: #daa048; background: rgba(218, 160, 72, 0.15); }
.wd-aqi--poor     { color: #e06050; background: rgba(224, 96, 80, 0.15); }

.wd-metrics-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.wd-m-cell {
  width: 25%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 3px 3px;
}

.wd-m-cell-lbl {
  color: #878472;
  font-size: 1.3vw;
  letter-spacing: 0.03em;
}

.wd-m-cell-val {
  color: #f2efe6;
  font-size: 1.8vw;
  font-weight: 600;
  margin-top: 1px;
}

/* ====== Card 3 & 4: hourly + daily, scrollable ====== */

.wd-scroll-track {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wd-scroll-track > * + * {
  margin-left: 10px;
}

.wd-scroll-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 4px 6px;
  min-width: 52px;
}

.wd-scroll-item-time {
  color: #878472;
  font-size: 1.4vw;
}

.wd-scroll-item-icon {
  font-size: 4vw;
  margin: 2px 0;
  line-height: 1;
}

.wd-scroll-item-val {
  color: #f2efe6;
  font-size: 2vw;
  font-weight: 600;
}

.wd-scroll-item-sub {
  color: #878472;
  font-size: 1.3vw;
  margin-top: 1px;
  white-space: nowrap;
}

/* ============================
   Shared card chrome
   ============================ */

.widget-card {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #2c3d33;
  border-radius: 8px;
  background: #182720;
}

.widget {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 14px 16px;
}

.widget__eyebrow {
  margin: 0;
  color: #878472;
  font-size: 1.7vw;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.widget__title {
  margin: 0;
  color: #c5beac;
  font-size: 2vw;
  font-weight: 600;
  line-height: 1.25;
}

.widget__meta {
  margin: 0;
  color: #878472;
  font-size: 1.7vw;
  line-height: 1.35;
}

/* ---------- Clock widget ---------- */

.clock-widget {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.clock-widget__time {
  color: #f2efe6;
  font-size: 8vw;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.93;
}

.clock-widget__seconds {
  margin-left: 0.1em;
  color: #daa048;
  font-size: 0.38em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: baseline;
}

.clock-widget__details {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.clock-widget__details > * + * {
  margin-left: 10px;
}

.clock-widget__weekday {
  color: #c5beac;
  font-size: 2.3vw;
  font-weight: 600;
}

/* ---------- Weather widget ---------- */

.weather-widget {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.weather-widget__top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.weather-widget__temperature {
  color: #f2efe6;
  font-size: 5.8vw;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.weather-widget__condition {
  margin: 0 0 3px;
  color: #c5beac;
  font-size: 2vw;
  font-weight: 600;
}

.weather-widget__range {
  margin: 0;
  color: #878472;
  font-size: 1.7vw;
}

/* ---------- Placeholder widget ---------- */

.placeholder-widget {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.placeholder-widget__message {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: #878472;
  font-size: 2.1vw;
  letter-spacing: 0.02em;
}

.placeholder-widget--todo .placeholder-widget__message {
  color: #6e8a64;
}

/* ---------- Page indicator ---------- */

.page-indicator {
  position: fixed;
  bottom: 13px;
  left: 50%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 10;
}

.page-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #878472;
  opacity: 0.6;
  -webkit-transition: opacity 0.3s, background 0.3s;
  transition: opacity 0.3s, background 0.3s;
}

.page-indicator__dot + .page-indicator__dot {
  margin-left: 7px;
}

.page-indicator__dot.is-active {
  background: #daa048;
  opacity: 1;
}

/* ============================
   Media queries
   ============================ */

/* short screen */
@media (max-height: 400px) {
  .dashboard-page--overview,
  .dashboard-page--planning {
    padding-top: 10px;
    padding-bottom: 28px;
  }

  .dashboard-page--overview .widget-card--clock,
  .dashboard-page--overview .widget-card--weather,
  .dashboard-page--planning .widget-card--stats,
  .dashboard-page--planning .widget-card--todo {
    top: 10px;
    bottom: calc(53% + 4px);
  }

  .dashboard-page--overview .widget-card--schedule,
  .dashboard-page--planning .widget-card--countdown {
    top: calc(47% + 20px);
    bottom: 28px;
  }

  .widget {
    padding: 10px 12px;
  }

  .dashboard-page--lockscreen {
    padding-bottom: 32px;
  }
}

/* font-size cap steps for lock screen */
@media (min-width: 420px) {
  .lockscreen__time      { font-size: 66px; }
  .lockscreen__weekday   { font-size: 14px; }
  .lockscreen__ymd,
  .lockscreen__weather-cond { font-size: 11px; }
  .lockscreen__weather-temp { font-size: 17px; }
}

@media (min-width: 520px) {
  .lockscreen__time      { font-size: 78px; }
  .lockscreen__weekday   { font-size: 16px; }
  .lockscreen__ymd,
  .lockscreen__weather-cond { font-size: 13px; }
  .lockscreen__weather-temp { font-size: 19px; }
}

@media (min-width: 650px) {
  .lockscreen__time      { font-size: 90px; }
  .lockscreen__weekday   { font-size: 18px; }
  .lockscreen__ymd,
  .lockscreen__weather-cond { font-size: 14px; }
  .lockscreen__weather-temp { font-size: 22px; }
}

@media (min-width: 800px) {
  .lockscreen__time      { font-size: 96px; }
  .lockscreen__weekday   { font-size: 19px; }
  .lockscreen__ymd,
  .lockscreen__weather-cond { font-size: 15px; }
  .lockscreen__weather-temp { font-size: 24px; }

  .widget__eyebrow           { font-size: 12px; }
  .widget__title             { font-size: 14px; }
  .widget__meta              { font-size: 12px; }
  .clock-widget__time        { font-size: 54px; }
  .clock-widget__weekday     { font-size: 16px; }
  .weather-widget__temperature { font-size: 42px; }
  .weather-widget__condition  { font-size: 14px; }
  .weather-widget__range      { font-size: 12px; }
  .placeholder-widget__message { font-size: 15px; }

  /* weather detail caps */
  .wd-section-label      { font-size: 11px; }
  .wd-cond-city          { font-size: 22px; }
  .wd-cond-time          { font-size: 11px; }
  .wd-cond-desc          { font-size: 14px; }
  .wd-cond-range         { font-size: 13px; }
  .wd-cond-temp          { font-size: 88px; }
  .wd-alert-badge        { font-size: 10px; }
  .wd-alert-brief        { font-size: 10px; }
  .wd-metrics-label,
  .wd-metrics-aqi        { font-size: 11px; }
  .wd-aqi-num            { font-size: 15px; }
  .wd-aqi                { font-size: 10px; }
  .wd-m-cell-lbl         { font-size: 9px; }
  .wd-m-cell-val         { font-size: 13px; }
  .wd-scroll-item-time   { font-size: 10px; }
  .wd-scroll-item-icon   { font-size: 28px; }
  .wd-scroll-item-val    { font-size: 14px; }
  .wd-scroll-item-sub    { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-track {
    -webkit-transition: none;
    transition: none;
  }
}