/* Look of the device's bottom screen (mini-oracle-design/reference_html/BotCal.dc.html) */
@font-face { font-family: "Pixelify Sans"; src: url("/fonts/PixelifySans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/Fredoka.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #2B2370;
  --plate: #5B4FD1;
  --outer: #6C5FD6;
  --paper: #F7F3FF;
  --muted: #8E86C0;
  --berry: #A1286A;
  --pink: #FF8CCB;
  --hot: #F0479F;
  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --round: "Fredoka", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: linear-gradient(#9AA3F2 0 23.3%, #B2A8F4 0 43.3%, #CBAEF2 0 61.7%, #E6B4EC 0 78.3%, #F6C6E4 0) fixed #F6C6E4; }
body { margin: 0; padding: 40px 16px 48px; font: 400 18px/1.4 var(--pixel); color: var(--ink); }
img.px { image-rendering: pixelated; display: block; }

/* Sky: dithered band seams, clouds and sparkles (filled in by pixels.js) */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky .seam { position: absolute; left: 0; right: 0; height: 8px; margin-top: -8px; background-repeat: repeat-x; }
.sky .cloud { position: absolute; }
.sky .spark { position: absolute; animation: twinkle 1.6s steps(1) infinite; }
@keyframes twinkle { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sky .spark, .blink { animation: none !important; } }

/* The screen: double border, star corners, side gems, title plate */
.screen { position: relative; max-width: 36rem; margin: 0 auto; padding: 48px 28px 52px; border: 4px solid var(--outer); }
.screen::before { content: ""; position: absolute; inset: 6px; border: 2px solid #fff; pointer-events: none; }
.corner { position: absolute; width: 21px; height: 21px; }
.corner::before { content: ""; position: absolute; inset: 3px; background: var(--plate); }
.corner img { position: relative; }
.corner.tl { left: -12px; top: -12px; }
.corner.tr { right: -12px; top: -12px; }
.corner.bl { left: -12px; bottom: -12px; }
.corner.br { right: -12px; bottom: -12px; }
.side { position: absolute; top: 50%; margin-top: -8px; }
.side.l { left: -10px; }
.side.r { right: -10px; }

.title { position: absolute; top: -19px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; }
.title img { margin: 0 -2px; position: relative; }
.plate {
  display: inline-block; margin: 0; padding: 1px 12px;
  font: 700 18px/26px var(--pixel); letter-spacing: .04em; text-transform: uppercase;
  color: var(--paper); background: var(--plate); border: 2px solid #fff;
}
.title .plate { font-size: 22px; line-height: 30px; padding: 0 16px; }

.foot { position: absolute; bottom: -15px; left: 22px; right: 22px; display: flex; justify-content: space-between; }
.foot .plate { display: flex; gap: 3px; padding: 3px 6px; font-size: 15px; line-height: 15px; border-width: 0; }
.foot a { color: var(--paper); text-decoration: none; padding: 0 4px; }
.foot a:hover { color: var(--pink); }

/* Panels, like the event cards on the TODAY screen */
.panel { background: var(--paper); border: 3px solid var(--plate); box-shadow: 3px 3px 0 var(--outer); padding: 12px 16px; margin: 0 0 20px; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
h2.plate { margin: 8px 0 12px; font-size: 16px; line-height: 22px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.error { color: var(--berry); }
.panel.error { border-color: var(--hot); }
a { color: var(--plate); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Buttons and inputs */
.btn {
  display: inline-block; padding: 7px 16px; cursor: pointer; text-decoration: none;
  font: 700 18px/24px var(--pixel); color: var(--paper); background: var(--plate);
  border: 2px solid #fff; box-shadow: 3px 3px 0 var(--outer);
}
.btn:hover { background: var(--outer); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.quiet { color: var(--plate); background: var(--paper); border: 3px solid var(--plate); padding: 6px 15px; }
.btn.quiet:hover { background: #fff; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
input {
  font: 400 20px/26px var(--pixel); color: var(--ink); background: #fff;
  border: 3px solid var(--plate); padding: 5px 10px; width: 15rem; max-width: 100%;
  text-transform: uppercase; letter-spacing: .12em;
}
input::placeholder { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 16px; }
form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
form + p:not(:empty) { margin-top: 10px; }

/* Calendar page sprite with today's date, like the top screen */
.page { --u: 5px; position: relative; width: calc(22 * var(--u)); height: calc(23 * var(--u)); margin: 0 auto 20px; text-align: center; }
.page img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page span { position: absolute; left: var(--u); width: calc(19 * var(--u)); color: var(--ink); }
.page .mon, .page .dow { font: 700 calc(2.7 * var(--u))/calc(3 * var(--u)) var(--pixel); }
.page .mon { top: calc(3.9 * var(--u)); }
.page .day { top: calc(8 * var(--u)); font: 600 calc(9.3 * var(--u))/calc(10 * var(--u)) var(--round); }
.page .dow { top: calc(18.3 * var(--u)); }

/* Events */
.ev { display: flex; gap: 14px; align-items: baseline; }
.ev + .ev { margin-top: 4px; }
.ev .time { flex: none; min-width: 4.4rem; font: 600 24px/28px var(--round); }
.ev .what { font: 400 20px/26px var(--pixel); overflow-wrap: anywhere; }
.later .time { color: var(--plate); }
.ev .time.muted { color: var(--muted); }
.blink { animation: twinkle 1s steps(1) infinite; }

/* Long text (privacy page) */
.prose { font: 400 17px/1.55 var(--round); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }

@media (max-width: 480px) {
  .screen { padding: 44px 18px 48px; }
  .title .plate { font-size: 18px; line-height: 26px; padding: 0 10px; }
  .title { top: -17px; }
}