/* Fridge Kindle — shared retro block-art stylesheet
   Strict black & white, WHITE background / BLACK ink (like paper, not a
   CRT) — no gradients/shadows/gray fills. Dithered texture comes from
   Unicode block glyphs (░▒▓█), not CSS color.

   The device's built-in browser is old WebKit (AppleWebKit/534.26+,
   Safari 5 era, ~2011 — confirmed via on-device UA string). It reports
   screen=600x800 (not the real 1236x1648 panel) and the OS upscales
   ~2.06x to fill the physical screen. It has NO Flexbox, NO CSS Grid,
   NO CSS.supports, NO aspect-ratio, and vw/vh are unreliable. So this
   file is built for a fixed 600x800px canvas using only floats,
   inline-block, and real <table> markup for grids — the techniques
   that actually render correctly on 2011-era WebKit. Fixed px, not
   vw/vh: an earlier vw attempt assumed a modern viewport-unit engine
   this browser doesn't have.

   Type scale is sized for fridge-mount reading distance (a few feet
   away), not phone-in-hand distance -- everything here reads much
   bigger than a typical mobile stylesheet at this canvas size.

   Every page is a fixed 600x800 canvas: header block, content block,
   then a footer band PINNED to the true bottom edge with
   position:absolute (old WebKit has no flex to push it there via
   normal flow, and leaving it in-flow left a large unused gap below it
   on pages with lighter content, like the home screen). Sizes are
   budgeted so real content never overlaps the pinned footer and never
   needs to scroll. */

@font-face {
  font-family: 'VT323';
  src: url('fonts/VT323-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
}

* { margin: 0; padding: 0; }

html, body {
  width: 600px;
  height: 800px;
  background: #fff;
  font-family: 'VT323', monospace;
  overflow: hidden;
}

.status-row:after,
.app-header:after,
.row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.screen {
  background: #fff;
  color: #000;
  width: 580px;
  height: 780px;
  position: relative;
  overflow: hidden;
  padding: 10px;
}

.corner { position: absolute; font-size: 16px; line-height: 1; color: #000; }
.corner.tl { top: 4px; left: 6px; }
.corner.tr { top: 4px; right: 6px; }
.corner.bl { bottom: 4px; left: 6px; }
.corner.br { bottom: 4px; right: 6px; }

/* --- home-only: top status row --- */
.status-row { margin-bottom: 8px; }
.status-row .battery { float: right; font-size: 18px; color: #555; }
.status-row .wifi { float: left; font-size: 18px; color: #555; }

/* --- home-only: big fridge-clock hero --- */
.home-date {
  text-align: center;
  font-size: 34px;
  letter-spacing: 3px;
  color: #444;
  margin-bottom: 10px;
}
.clock-hero {
  text-align: center;
  font-size: 175px;
  line-height: 1;
  margin-bottom: 18px;
}
.clock-hero .blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.day-meter {
  text-align: center;
  font-size: 27px;
  letter-spacing: 1px;
  color: #666;
  margin-bottom: 20px;
}

/* --- home-only: reminders/notes/updates status chips (real <table>) --- */
table.stat-chips { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table.stat-chips td { width: 33.3%; padding: 3px; }
.stat-chip {
  border: 2px solid #000;
  text-align: center;
  padding: 16px 4px;
}
.stat-chip .chip-icon { display: block; font-size: 34px; line-height: 1; margin-bottom: 6px; }
.stat-chip .chip-value { display: block; font-size: 30px; font-weight: bold; }
.stat-chip .chip-label { display: block; font-size: 17px; letter-spacing: 1px; color: #666; margin-top: 3px; }

.ticker {
  clear: both;
  border: 2px solid #000;
  padding: 14px 16px;
  font-size: 26px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 20px;
}
.ticker .sep { color: #999; margin: 0 5px; }

/* --- app header: back button + pixel icon chip + title (float layout) --- */
.app-header {
  padding-bottom: 12px;
  border-bottom: 2px solid #bbb;
  margin-bottom: 16px;
}
.back-btn {
  float: left;
  border: 2px solid #000;
  color: #000;
  text-decoration: none;
  font-size: 22px;
  width: 46px; height: 46px;
  line-height: 42px;
  text-align: center;
}
.back-btn:active { background: #000; color: #fff; }

.icon-chip {
  float: left;
  border: 2px solid #000;
  width: 54px; height: 54px;
  line-height: 50px;
  text-align: center;
  margin-left: 12px;
}
.icon-chip pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 0.95;
  white-space: pre;
  text-align: center;
}
.icon-glyph { font-size: 27px; line-height: 1; }

.title-block { margin-left: 118px; }
.stage-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #666;
  display: block;
  margin-bottom: 6px;
}
.app-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 19px;
  line-height: 1.3;
}

/* --- content band --- */
.content { }

.card {
  border: 2px solid #000;
  padding: 14px 16px;
  margin-bottom: 16px;
}
/* single-stat hero card: hugs its content, does not stretch full width */
.card.hero {
  width: 420px;
  margin: 0 auto 16px;
  padding: 18px 22px;
}
.card-label {
  font-size: 17px;
  letter-spacing: 1px;
  color: #666;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.row {
  padding: 7px 0;
  border-bottom: 1px dotted #bbb;
  font-size: 22px;
  line-height: 27px;
}
.row:last-child { border-bottom: none; }
.row .left-part { float: left; }
.row .right-part { float: right; }

.checkbox {
  display: inline-block;
  vertical-align: middle;
  width: 24px; height: 24px;
  line-height: 20px;
  text-align: center;
  border: 2px solid #000;
  font-size: 16px;
  margin-right: 11px;
}
.checkbox.on { background: #000; color: #fff; }
.strike { text-decoration: line-through; color: #888; }

.pill {
  display: inline-block;
  border: 1px solid #000;
  font-size: 14px;
  padding: 3px 10px;
  margin-right: 9px;
  white-space: nowrap;
}
.pill.on { background: #000; color: #fff; }

.meter { font-size: 22px; letter-spacing: 1px; }

.big-stat {
  font-family: 'Press Start 2P', monospace;
  font-size: 35px;
  text-align: center;
  margin: 7px 0;
  line-height: 1.4;
}

.btn {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #000;
  border: 2px solid #000;
  padding: 16px;
  font-size: 22px;
  margin-bottom: 16px;
}
.btn.outline { background: #fff; color: #000; }
.btn:active { background: #fff; color: #000; }

.btn-apps {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: #000;
  border: 3px solid #000;
  padding: 26px;
  font-size: 40px;
  letter-spacing: 2px;
  font-weight: bold;
  margin-bottom: 16px;
}
.btn-apps:active { background: #fff; color: #000; }

.divider {
  text-align: center;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  padding: 6px 0;
  font-size: 16px;
  letter-spacing: 2px;
  color: #666;
  margin-bottom: 12px;
}

/* --- footer band: pinned to the true bottom of the screen so the page
   always reads full-height even when content above is shorter than the
   budget (no flex available to push it there via normal flow) --- */
.footer-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  border-top: 1px solid #ccc;
  padding-top: 8px;
  text-align: center;
  font-size: 17px;
  letter-spacing: 1px;
  color: #888;
}

/* --- apps.html-only: cartridge select grid (real <table>, no CSS grid) --- */
table.cart-grid { width: 100%; border-collapse: collapse; }
table.cart-grid td { width: 50%; padding: 4px; }
.cart-tile {
  display: block;
  border: 2px solid #000;
  text-decoration: none;
  color: #000;
  text-align: center;
  padding: 18px 6px;
}
.cart-tile .num { display: block; font-family: 'Press Start 2P', monospace; font-size: 11px; color: #666; margin-bottom: 5px; }
.cart-tile .glyph { display: block; font-size: 35px; line-height: 1; margin-bottom: 5px; }
.cart-tile .label { display: block; font-size: 22px; }
.cart-tile:active { background: #000; color: #fff; }
.cart-tile:active .num { color: #fff; }

.daycol { display: inline-block; width: 70px; }

.row-wide { margin-bottom: 16px; }
.row-wide:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.half-l { float: left; width: 47%; margin-bottom: 0; }
.half-r { float: right; width: 47%; margin-bottom: 0; }

/* --- utilities --- */
.center  { text-align: center; }
.left    { text-align: left; }
.bold    { font-weight: bold; }
.flat    { margin: 0; }
.italic  { font-style: italic; }
.dim     { color: #888; }
.dimmer  { color: #666; }
.mt3     { margin-top: 4px; }
.mt4     { margin-top: 6px; }
.mt8     { margin-top: 12px; }
.my6     { margin: 9px 0; }
.gap-prompt { margin: 9px 0 14px; }
.fs15 { font-size: 18px; }
.fs16 { font-size: 19px; }
.fs17 { font-size: 21px; }
.fs18 { font-size: 22px; }
.fs19 { font-size: 24px; }
.fs20 { font-size: 25px; }
.fs24 { font-size: 30px; }
.fs30 { font-size: 38px; }