/* Launcher-only styling. Everything else comes from the shared kit. */

header{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5);
}
header h1{ margin: 0; font-size: 34px; line-height: 1.06; font-weight: 700; letter-spacing: -.028em }
.sub{ margin: var(--s1) 0 0; font-size: 17px; color: var(--second) }
.stamp{
  flex: 0 0 auto; text-align: right; padding-top: 5px;
  font-size: 13px; line-height: 1.45; color: var(--tertiary);
  font-variant-numeric: tabular-nums;
}

/* ---- the status board ----
   Sits above the apps because it is the reason to open this page. Each line is
   a link straight into the app that raised it, so seeing a problem and acting
   on it is one tap, not two. */
.board:not(:empty){
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: var(--s4) var(--s5) var(--s3); margin-bottom: var(--s5);
}
.boardhead{
  font-size: 13px; font-weight: 600; color: var(--second);
  margin-bottom: var(--s2);
}
.boardhead b{ color: var(--accent) }
.bline{
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: var(--s1) 0; text-decoration: none; color: var(--text);
  border-top: 1px solid var(--hairline);
}
.bline:first-of-type{ border-top: 0 }
.bmark{ flex: 0 0 22px; display: grid; place-items: center; color: var(--tertiary) }
.btext{ flex: 1; font-size: 15px; line-height: 1.35 }
.btext em{ font-style: normal; color: var(--tertiary); font-size: 13px }
.bline.t-now     .bmark, .bline.t-now .btext    { color: var(--accent) }
.bline.t-overdue .bmark, .bline.t-overdue .btext{ color: var(--brick) }
.bline.t-soon    .btext{ color: var(--text) }
.bline.t-ok      .btext{ color: var(--second) }

/* ---- app tiles ---- */
main{ display: flex; flex-direction: column; gap: var(--s3) }
.app{
  display: flex; align-items: center; gap: var(--s4);
  background: var(--surface); border: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: var(--s4);
  text-decoration: none; color: inherit; min-height: 80px;
  transition: transform .18s var(--ease);
}
.app:active{ transform: scale(.985) }
.app .mark{
  flex: 0 0 50px; height: 50px; border-radius: var(--r-md);
  display: grid; place-items: center; color: #F2EDE3;
}
.app .body{ flex: 1; min-width: 0 }
.app b{ display: block; font-size: 19px; font-weight: 600; letter-spacing: -.018em }
.app .blurb{ display: block; font-size: 15px; line-height: 1.4; color: var(--second); margin-top: 1px }
.app .go{ flex: 0 0 auto; color: var(--tertiary); display: grid; place-items: center }

.soon{ margin-top: var(--s8) }
.soon h2{ margin: 0 0 var(--s3) }
.stub{
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1.5px var(--hairline); margin-bottom: var(--s2);
}
.stub .mark{
  flex: 0 0 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--tertiary); background: var(--raised);
}
.stub b{ display: block; font-size: 15px; font-weight: 600; color: var(--second) }
.stub .blurb{ display: block; font-size: 13px; line-height: 1.4; color: var(--tertiary) }

footer{ margin-top: auto; padding-top: var(--s8) }
footer p{ margin: 0; font-size: 13px; color: var(--tertiary) }

/* ---- five day forecast ----
   Weather is the one place colour means something other than the accent: sun
   is warm, rain is cool, so the week reads without reading a word. */
.wx:not(:empty){ margin-bottom: var(--s4) }
.wxstrip{ display: flex; gap: var(--s1) }
.wxday{
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: var(--s3) 2px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow);
}
.wxlab{ font-size: 11px; font-weight: 600; color: var(--tertiary); letter-spacing: .01em }
.wxart{ color: var(--second); line-height: 0; margin: 1px 0 }
.wxart.k-sun, .wxart.k-suncloud{ color: var(--accent) }
.wxart.k-rain, .wxart.k-showers, .wxart.k-drizzle{ color: var(--cool) }
.wxart.k-storm{ color: var(--brick) }
.wxhi{ font-size: 17px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.wxlo{ font-size: 13px; color: var(--second); font-variant-numeric: tabular-nums }
.wxrain{ font-size: 11px; color: var(--tertiary); font-variant-numeric: tabular-nums }
.wxrain.wet{ color: var(--cool); font-weight: 600 }
.wxwarn{
  margin: var(--s2) 0 0; padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--brick) 18%, var(--surface));
  font-size: 15px; line-height: 1.45;
}
.wxstale{ margin: var(--s2) 0 0; font-size: 13px; color: var(--tertiary) }

/* ---- account ---- */
.account:not(:empty){ margin-top: var(--s8) }
.acct{ display: flex; align-items: center; gap: var(--s3) }
.acct .who{ flex: 1; font-size: 15px; color: var(--second) }
.acct .who b{ color: var(--text); font-weight: 600 }
.signin{
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: var(--s5);
}
.signin .lede{ font-size: 15px }

/* ------------------------------------------------------------------- UV --
   Sits directly under the week, because it is the same question at a finer
   grain: the strip says what the days are like, this says what today is like
   right now. */
.uv{ margin-bottom: var(--s4) }
.uv:empty{ display: none }

.uvhead{ display: flex; align-items: baseline; gap: var(--s3) }
.uvnum{
  font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.uvtext{ font-size: 14px; color: var(--second); line-height: 1.35 }
.uvtext b{ color: var(--text); font-weight: 600 }

/* preserveAspectRatio="none" on the svg means the bars stretch to whatever
   width the phone gives them, and the height stays fixed and legible. */
.uvchart{ position: relative; margin-top: var(--s3) }
.uvchart svg{ display: block; width: 100%; height: 74px; color: var(--text) }

.uvticks{ position: relative; height: 14px; margin-top: 3px }
.uvticks span{
  position: absolute; transform: translateX(-50%);
  font-size: 11px; color: var(--tertiary); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.uvnote{ margin: var(--s3) 0 0; font-size: 13px; line-height: 1.5; color: var(--tertiary) }
.uvnote b{ color: var(--second); font-weight: 600 }

/* Same weight as the "Not built yet" heading below it — a section heading, not
   a caption. UV is the one figure on this page whose units are not obvious
   from the number itself, so it has to be named. */
.uv h2{ margin: 0 0 var(--s3) }