/* Home Dashboard screens. Plain CSS that old iPads (iOS 9) and Android
   tablets understand: flexbox with margins, no grid, no gap, no variables. */

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (min-width: 1200px) and (min-height: 760px) { html { font-size: 20px; } }
@media (min-width: 1700px) and (min-height: 1000px) { html { font-size: 26px; } }

* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif; background: #0F1216; color: #EDEFF2; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: #7DB7F0; }
a:focus, button:focus { outline: 3px solid #F2B84B; outline-offset: 2px; }
.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; }
.num { font-variant-numeric: tabular-nums; -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; }
.ico { width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---- Layout ---- */
#app { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.day-view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 2.5rem 3rem 1.9rem; display: flex; flex-direction: column; }
.night-view { display: none; }
body.night { background: #000; }
body.night .day-view { display: none; }
body.night .night-view { display: flex; }
body.night.wake { background: #0F1216; }
body.theme-light.night.wake { background: #EEF1F4; }
body.night.wake .day-view { display: flex; }
body.night.wake .night-view { display: none; }

/* ---- Top: clock and weather ---- */
.top { display: flex; justify-content: space-between; align-items: flex-start; flex-shrink: 0; }
.clock { font-size: 10.75rem; font-weight: 200; line-height: 0.86; letter-spacing: -0.04em; margin-left: -0.05em; }
.date { font-size: 1.75rem; font-weight: 500; color: #A1A9B4; margin-top: 0.9rem; }
.owner-link { font-size: 1rem; font-weight: 700; margin-left: 0.75rem; display: inline-block; padding: 0.6rem 0; vertical-align: middle; }
.weather { text-align: right; margin-left: 2rem; padding-top: 0.25rem; max-width: 26rem; }
.weather-now { display: flex; align-items: center; justify-content: flex-end; }
.weather-now .wx { width: 4.1rem; height: 4.1rem; margin-right: 0.9rem; color: #F2B84B; stroke-width: 1.6; }
.temp { font-size: 5.75rem; font-weight: 200; line-height: 0.9; letter-spacing: -0.03em; }
.weather-line { font-size: 1.3rem; font-weight: 600; margin-top: 0.6rem; }
.weather-sub { font-size: 1.125rem; color: #A1A9B4; margin-top: 0.4rem; }

/* ---- Middle: today and the side cards ---- */
.middle { display: flex; flex: 1 1 auto; min-height: 0; margin-top: 1.75rem; }
.card { background: #181C22; border-radius: 1.4rem; padding: 1.4rem 1.5rem; }
.today { flex: 3 1 0%; min-width: 0; overflow: hidden; }
.side { flex: 2 1 0%; min-width: 0; display: flex; flex-direction: column; margin-left: 1.25rem; }
.side-card { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.side-card + .side-card { margin-top: 1.25rem; }

.today-head { display: flex; justify-content: space-between; align-items: center; padding: 0 0.25rem; margin-bottom: 0.75rem; }
.today-head h2 { margin: 0; font-size: 1.375rem; font-weight: 700; }
.legend { font-size: 0.95rem; font-weight: 500; color: #A1A9B4; white-space: nowrap; overflow: hidden; }
.legend span { margin-left: 1.1rem; }
.dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; margin-right: 0.45rem; vertical-align: middle; background: #F2B84B; }
.c0 { background: #F2B84B; }
.c1 { background: #7DB7F0; }
.c2 { background: #9ED3A6; }
.c3 { background: #F09A7D; }

.row { display: flex; align-items: center; padding: 0.62rem 1rem; border-radius: 0.9rem; }
.row + .row { margin-top: 0.25rem; }
.row.next { background: #232933; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.row .t { width: 4.6rem; flex-shrink: 0; font-size: 1.2rem; font-weight: 600; color: #A1A9B4; white-space: nowrap; }
.row.next .t { color: #EDEFF2; font-weight: 700; font-size: 1.3rem; }
.row .dot { flex-shrink: 0; margin: 0 1rem 0 0; }
.row .what { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.next .what { font-size: 1.3rem; font-weight: 700; }
.row .where { font-weight: 500; color: #A1A9B4; }
.badge { margin-left: 1rem; font-size: 1.05rem; font-weight: 700; color: #F2B84B; white-space: nowrap; }
.more, .empty-note { font-size: 1.1rem; color: #A1A9B4; margin: 0.5rem 0 0; padding: 0 1rem; line-height: 1.5; }

.label { display: flex; align-items: center; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #A1A9B4; }
.label .ico { margin-right: 0.6rem; }
.big-line { font-size: 1.65rem; font-weight: 700; line-height: 1.2; }
.sub-line { font-size: 1.06rem; color: #A1A9B4; margin-top: 0.5rem; }
.side-card.urgent { background: #F2B84B; color: #241A00; }
.side-card.urgent .label, .side-card.urgent .sub-line { color: #3D2C00; }
.count { display: flex; align-items: flex-end; }
.count .n { font-size: 4.75rem; font-weight: 200; line-height: 0.8; letter-spacing: -0.03em; color: #F2B84B; margin-right: 1rem; }
.count .big-line, .count .sub-line { display: block; }
.count .sub-line.first { margin: 0 0 0.2rem; }
.big-line.accent { color: #F2B84B; }

/* ---- News along the bottom ---- */
.news { display: flex; align-items: center; flex-shrink: 0; border-top: 1px solid #2C323B; padding-top: 1rem; margin-top: 1.75rem; font-size: 1.2rem; }
.news .ico { width: 1.4rem; height: 1.4rem; color: #A1A9B4; margin-right: 0.9rem; }
.news-items { flex: 1 1 auto; min-width: 0; }
.news-item { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.news-item.on { display: block; }
.news-item .src { font-weight: 700; color: #A1A9B4; margin-right: 0.7rem; }
.news-item .ago { font-weight: 500; font-size: 1rem; color: #8A93A0; margin-right: 0.9rem; }
.pips { margin-left: 1rem; white-space: nowrap; }
.pip { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #2C323B; margin-left: 0.4rem; }
.pip.on { background: #EDEFF2; }

/* ---- Light colours ---- */
body.theme-light { background: #EEF1F4; color: #15191E; }
.theme-light a { color: #2F6FB3; }
.theme-light .card { background: #FFFFFF; }
.theme-light .row.next { background: #E8ECF1; }
.theme-light .row.next .t { color: #15191E; }
.theme-light .date, .theme-light .weather-sub, .theme-light .legend, .theme-light .row .t, .theme-light .row .where,
.theme-light .more, .theme-light .empty-note, .theme-light .label, .theme-light .sub-line, .theme-light .news-item .src { color: #4F5864; }
.theme-light .news-item .ago { color: #5F6873; }
.theme-light .weather-now .wx { color: #B57A00; }
.theme-light .badge, .theme-light .count .n, .theme-light .big-line.accent { color: #8A5A00; }
.theme-light .c1 { background: #2F6FB3; }
.theme-light .c2 { background: #2E7D4F; }
.theme-light .c3 { background: #B5502F; }
.theme-light .news { border-top-color: #D3D9E0; }
.theme-light .news .ico { color: #4F5864; }
.theme-light .pip { background: #D3D9E0; }
.theme-light .pip.on { background: #15191E; }
.theme-light .side-card.urgent { background: #F2B84B; color: #241A00; }
.theme-light .side-card.urgent .label, .theme-light .side-card.urgent .sub-line { color: #3D2C00; }

/* ---- Night ---- */
.night-view { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; color: #D08060; padding: 2.25rem 3.5rem 2.5rem; flex-direction: column; }
.night-top { display: flex; align-items: center; justify-content: flex-end; font-size: 1rem; font-weight: 600; }
.night-top .ico { margin-right: 0.6rem; }
.night-mid { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.night-clock { font-size: 15rem; font-weight: 200; line-height: 0.85; letter-spacing: -0.04em; color: #C4603F; }
.night-date { font-size: 1.6rem; font-weight: 500; margin-top: 1.1rem; }
.night-row { display: flex; }
.night-row > div { flex: 1 1 0%; min-width: 0; border-top: 1px solid #3A1E14; padding-top: 1.1rem; }
.night-row > div + div { margin-left: 1.5rem; }
.night-row .k { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #B8704F; margin-bottom: 0.5rem; }
.night-row .v { font-size: 1.25rem; font-weight: 600; }
.night-row .v .ico { width: 1.5rem; height: 1.5rem; margin: -0.2rem 0.5rem 0 0; }

/* ---- Connect this screen ---- */
.pair { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 3rem 3.5rem 2.25rem; display: flex; flex-direction: column; justify-content: space-between; overflow: auto; }
.pair-main { display: flex; align-items: center; justify-content: space-between; }
.pair-text { max-width: 35rem; margin-right: 3rem; }
.kicker { font-size: 1rem; font-weight: 700; color: #A1A9B4; }
.pair h1 { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0.8rem 0; }
.pair p { font-size: 1.2rem; line-height: 1.5; color: #A1A9B4; margin: 0; }
.pair p strong { color: #EDEFF2; }
.code { font-size: 7.25rem; font-weight: 200; letter-spacing: 0.06em; line-height: 1; color: #F2B84B; margin-top: 1.4rem; white-space: nowrap; }
.pair p.small { font-size: 0.95rem; color: #8A93A0; margin-top: 0.9rem; }
.qr { width: 16.5rem; height: 16.5rem; flex-shrink: 0; background: #FFFFFF; border-radius: 1.4rem; padding: 1.2rem; }
.qr svg { display: block; width: 100%; height: 100%; }
.tips { display: flex; margin-top: 2rem; }
.tip { flex: 1 1 0%; display: flex; align-items: flex-start; background: #181C22; border-radius: 1.1rem; padding: 1.1rem 1.25rem; }
.tip + .tip { margin-left: 1.1rem; }
.tip .ico { width: 1.5rem; height: 1.5rem; color: #F2B84B; margin-right: 0.9rem; }
.tip b { display: block; font-size: 1.06rem; }
.tip span { display: block; font-size: 0.95rem; line-height: 1.45; color: #A1A9B4; margin-top: 0.25rem; }
.pair p.owner { font-size: 1rem; margin-top: 1.25rem; }

/* ---- Offline note ---- */
.offline { display: none; position: fixed; left: 50%; bottom: 1rem; width: 26rem; margin-left: -13rem; padding: 0.7rem 1rem; border-radius: 999px; background: #3A1E14; color: #F6D2C4; font-size: 0.95rem; font-weight: 600; text-align: center; }
.offline.on { display: block; }

/* ---- Tablets held upright ---- */
@media (orientation: portrait) and (min-width: 701px) {
  .clock { font-size: 8.5rem; }
  .temp { font-size: 4.5rem; }
  .middle { flex-direction: column; }
  .today { flex: 1 1 auto; }
  .side { flex: 0 0 auto; flex-direction: row; margin: 1.25rem 0 0; }
  .side-card { min-height: 11rem; }
  .side-card + .side-card { margin: 0 0 0 1.25rem; }
  .night-clock { font-size: 11rem; }
  .pair-main { flex-direction: column; align-items: flex-start; }
  .qr { margin-top: 2rem; }
}

/* ---- Phones ---- */
@media (max-width: 700px) {
  #app, .day-view, .pair { position: static; }
  #app { overflow: visible; }
  .day-view { padding: 1.4rem 1rem 2rem; }
  .top { flex-direction: column; }
  .clock { font-size: 5.5rem; }
  .date { font-size: 1.2rem; margin-top: 0.6rem; }
  .weather { text-align: left; margin: 1.25rem 0 0; }
  .weather-now { justify-content: flex-start; }
  .weather-now .wx { width: 3rem; height: 3rem; }
  .temp { font-size: 3.5rem; }
  .middle { flex-direction: column; margin-top: 1.25rem; }
  .card { padding: 1.1rem 0.9rem; }
  .side { margin: 1rem 0 0; }
  .side-card { min-height: 8rem; }
  .side-card + .side-card { margin-top: 1rem; }
  .row { padding: 0.6rem 0.6rem; }
  .row .t, .row.next .t { width: 3.6rem; font-size: 1rem; }
  .row .what, .row.next .what { font-size: 1.05rem; }
  .badge { font-size: 0.9rem; }
  .big-line { font-size: 1.3rem; }
  .news { font-size: 1rem; }
  .night-view { position: fixed; padding: 1.5rem 1rem; }
  .night-clock { font-size: 6rem; }
  .night-row { flex-direction: column; }
  .night-row > div + div { margin: 1rem 0 0; }
  .pair { padding: 1.5rem 1rem 2rem; }
  .pair-main { flex-direction: column; align-items: flex-start; }
  .tips { flex-direction: column; }
  .pair-text { margin-right: 0; }
  .pair h1 { font-size: 2rem; }
  .code { font-size: 4rem; }
  .qr { margin-top: 1.5rem; width: 14rem; height: 14rem; }
  .tip + .tip { margin: 1rem 0 0; }
  .offline { width: auto; left: 1rem; right: 1rem; margin-left: 0; }
}