/* PCC design system: Metro (Windows Phone / Lumia).
   Flat color, no shadows, no rounded corners, big light lowercase type, content first.
   Every page links this file plus Open Sans (300/400/600) from Google Fonts. */

:root {
  --bg: #000000; --fg: #ffffff; --fg2: #a6a6a6; --fg3: #6b6b6b;
  --line: #333333; --field: #1f1f1f; --field-on: #ffffff; --field-on-fg: #000000;
  --accent: #1ba1e2;                 /* default accent: blue */
  --ok: #60a917; --warn: #f0a30a; --bad: #e51400;

  /* Tile colors (white text on all of them, >=3:1 for large type) */
  --t-cobalt: #0050ef; --t-emerald: #008a00; --t-crimson: #a20025; --t-teal: #008b8a;
  --t-violet: #6a00ff; --t-magenta: #d80073; --t-orange: #d85a00; --t-steel: #647687;
  --t-brown: #825a2c; --t-indigo: #3e3eb5; --t-blue: #1b7fc4; --t-red: #c41200;

  --unit: calc((min(100vw, 520px) - 2 * var(--gut) - 3 * var(--gap)) / 4);
  --gut: 12px; --gap: 8px;
  --font: "Open Sans", "Segoe UI", "Segoe WP", -apple-system, system-ui, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --fg: #000000; --fg2: #5c5c5c; --fg3: #9a9a9a;
    --line: #dcdcdc; --field: #ececec; --field-on: #ffffff; --field-on-fg: #000000;
    --accent: #1b7fc4;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
  padding: max(env(safe-area-inset-top), 18px) 0 max(env(safe-area-inset-bottom), 24px);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }
.muted { color: var(--fg2); }

/* ── Page chrome ───────────────────────────────────────────── */
.m-page { max-width: 760px; margin: 0 auto; padding: 0 20px; animation: m-turnstile .35s cubic-bezier(.1,.9,.2,1) both; transform-origin: left center; }
.m-apptitle { font-size: 14px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.m-apptitle a.m-back { width: 32px; height: 32px; border: 2px solid var(--fg); border-radius: 50%; display: inline-grid; place-items: center; }
.m-apptitle a.m-back svg { width: 14px; height: 14px; }
.m-title { font-size: 56px; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; text-transform: lowercase; margin: 6px 0 18px -3px; }
@media (max-width: 420px) { .m-title { font-size: 46px; } }
.m-h { font-size: 26px; font-weight: 300; text-transform: lowercase; margin: 30px 0 10px; }
.m-sub { font-size: 14px; color: var(--fg2); }

/* Pivot headers: lowercase, current one bright, rest dim; scrolls sideways */
.m-pivot { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin: 6px -20px 16px; padding: 0 20px; }
.m-pivot::-webkit-scrollbar { display: none; }
.m-pivot button, .m-pivot a {
  background: none; border: 0; color: var(--fg3); font-size: 34px; font-weight: 300; text-transform: lowercase;
  white-space: nowrap; cursor: pointer; padding: 0; line-height: 1.2; transition: color .2s;
  min-width: 32px; min-height: 32px; display: inline-flex; align-items: center;
  flex: none;             /* keep natural width: the row scrolls sideways instead of squashing labels */
}
.m-pivot .on { color: var(--fg); }

/* ── Tiles ─────────────────────────────────────────────────── */
.m-start { max-width: 520px; margin: 0 auto; padding: 0 var(--gut); }
.m-tiles { display: grid; grid-template-columns: repeat(4, var(--unit)); grid-auto-rows: var(--unit); gap: var(--gap); grid-auto-flow: dense; }
.tile {
  position: relative; overflow: hidden; background: var(--c, var(--accent)); color: #fff;
  grid-column: span 2; grid-row: span 2; display: block; cursor: pointer; border: 0; text-align: left;
  transition: transform .12s ease; transform-style: preserve-3d;
  animation: m-tile-in .5s cubic-bezier(.1,.9,.2,1) both;
}
.tile.s { grid-column: span 1; grid-row: span 1; }
.tile.w { grid-column: span 4; grid-row: span 2; }
.tile:active { transform: perspective(600px) scale(.96) rotateX(3deg); }
.tile .lbl { position: absolute; left: 10px; bottom: 8px; right: 10px; font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .count { position: absolute; right: 10px; bottom: 6px; font-size: 26px; font-weight: 300; }
.tile .ico { position: absolute; inset: 0; display: grid; place-items: center; }
.tile .ico svg { width: 38%; height: 38%; stroke: #fff; fill: none; stroke-width: 1.6; }
.tile.s .ico svg { width: 46%; height: 46%; }
.tile .big { position: absolute; left: 10px; top: 6px; font-size: 44px; font-weight: 300; line-height: 1.1; }
.tile .body { position: absolute; left: 10px; right: 10px; top: 8px; font-size: 15px; line-height: 1.3; }
.tile .body b { font-weight: 600; }
/* Live tile: two faces that flip up */
.tile .face { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s; }
.tile .face.back { transform: translateY(100%); }
.tile.flipped .face.front { transform: translateY(-100%); }
.tile.flipped .face.back { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .tile .face { transition: none; } .m-page, .tile { animation: none; } }

@keyframes m-tile-in { from { opacity: 0; transform: perspective(800px) rotateY(-60deg) translateX(-20px); } }
@keyframes m-turnstile { from { opacity: 0; transform: perspective(1200px) rotateY(-35deg) translateX(-30px); } }

/* ── Lists ─────────────────────────────────────────────────── */
.m-list { list-style: none; }
.m-item { display: block; padding: 10px 0 14px; cursor: pointer; transition: transform .1s; }
.m-item:active { transform: translateX(4px); }
.m-item .t { font-size: 22px; font-weight: 300; line-height: 1.25; }
.m-item .s { font-size: 14px; color: var(--accent); margin-top: 2px; }
.m-item .d { font-size: 14px; color: var(--fg2); margin-top: 2px; line-height: 1.4; }

/* ── Controls ──────────────────────────────────────────────── */
.m-btn {
  display: inline-block; background: transparent; color: var(--fg); border: 2px solid var(--fg);
  font-size: 15px; font-weight: 600; padding: 7px 18px; cursor: pointer; min-height: 40px;
}
.m-btn:active { background: var(--accent); border-color: var(--accent); color: #fff; }
.m-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.m-input, .m-select, textarea.m-input {
  width: 100%; background: var(--field); color: var(--fg); border: 2px solid var(--field);
  font: inherit; font-size: 16px; padding: 8px 10px; outline: 0;
}
.m-input:focus { background: var(--field-on); color: var(--field-on-fg); border-color: var(--accent); }
.m-link { color: var(--accent); background: none; border: 0; font-size: 15px; cursor: pointer; padding: 0; }

/* Bottom app bar: round outlined buttons with labels */
.m-appbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--field);
  display: flex; justify-content: center; gap: 28px; padding: 8px 0 max(env(safe-area-inset-bottom), 8px);
}
.m-appbar button, .m-appbar a { background: none; border: 0; color: var(--fg); display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; cursor: pointer; }
.m-appbar .circ { width: 40px; height: 40px; border: 2px solid var(--fg); border-radius: 50%; display: grid; place-items: center; }
.m-appbar .circ svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.m-appbar button:active .circ { background: var(--fg); color: var(--bg); }

/* Flat panels (used sparingly; Metro prefers raw content on the background) */
.m-panel { background: var(--field); padding: 14px 16px; }
.m-stat b { display: block; font-size: 34px; font-weight: 300; line-height: 1.1; }
.m-stat span { font-size: 13px; color: var(--fg2); }

/* Toast */
.m-toast { position: fixed; left: 0; right: 0; top: 0; z-index: 50; background: var(--accent); color: #fff; padding: max(env(safe-area-inset-top), 10px) 20px 10px; font-size: 15px; transform: translateY(-100%); transition: transform .25s; }
.m-toast.on { transform: none; }

/* Sheet (full-screen overlay, like WP "new message") */
.m-sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); padding: max(env(safe-area-inset-top), 18px) 20px 20px; display: none; }
.m-sheet.on { display: block; animation: m-turnstile .3s cubic-bezier(.1,.9,.2,1) both; }

/* ── Bottom navigation (nav.js) ────────────────────────────── */
/* Lumia-inspired: back / start / search row, reimagined as five labeled icons on frosted glass. */
body.has-nav { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.m-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr); max-width: 560px; margin: 0 auto;
  padding: 6px 8px max(env(safe-area-inset-bottom), 8px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--line);
}
@media (min-width: 561px) { .m-nav { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.m-nav > * {
  background: none; border: 0; color: var(--fg2); cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; position: relative;
  transition: color .15s, transform .1s;
}
.m-nav > *:active { transform: scale(.92); }
.m-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m-nav span { font-size: 11px; line-height: 1; text-transform: lowercase; }
.m-nav .on { color: var(--fg); }
.m-nav .on::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; background: var(--accent); }
.m-nav .start svg { width: 26px; height: 26px; }
.m-nav .start.on svg { fill: var(--accent); stroke: var(--accent); }
.m-nav button:disabled { opacity: .35; cursor: default; }

/* "more" sheet: slides up above the bar */
.m-more { position: fixed; inset: 0; z-index: 29; pointer-events: none; }
.m-more-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s; }
.m-more-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: var(--field);
  padding: 16px 24px calc(84px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .28s cubic-bezier(.1,.9,.2,1);
  max-height: 100dvh; overflow-y: auto;   /* short phones: the list scrolls instead of losing its top items */
}
.m-more.on { pointer-events: auto; }
.m-more.on .m-more-scrim { opacity: 1; }
.m-more.on .m-more-panel { transform: none; }
.m-more .m-item { padding: 8px 0 10px; }
.m-more .m-item.on .t { color: var(--accent); }