/* Kindle-friendly baseline: high contrast, big tap targets, no animation.
   Deliberately avoids CSS variables, grid, and transitions so that old
   WebKit/Chromium builds render the same thing. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.5;
  padding: 16px 20px 40px 20px;
  max-width: 720px;
  margin: 0 auto;
}

h1 { font-size: 28px; margin: 8px 0 4px 0; }
h2 { font-size: 22px; margin: 20px 0 8px 0; }
p  { margin: 0 0 14px 0; }

.meta {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid #000;
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.small { font-size: 15px; font-family: Helvetica, Arial, sans-serif; }

/* Buttons are plain links: every interaction is a page load,
   which is the most reliable thing an e-ink browser can do. */
a.btn {
  display: block;
  border: 3px solid #000;
  padding: 16px 14px;
  margin: 12px 0;
  text-align: center;
  text-decoration: none;
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
}
a.btn.primary { background: #000; color: #fff; }
a.btn.quiet   { border-width: 1px; font-weight: normal; }

.row { overflow: hidden; }
.row a.btn { float: left; width: 48%; }
.row a.btn + a.btn { margin-left: 4%; }

.card {
  border: 2px solid #000;
  padding: 14px 16px;
  margin: 14px 0;
}

.quote {
  font-size: 22px;
  font-style: italic;
  border-left: 6px solid #000;
  padding-left: 14px;
  margin: 14px 0;
}

/* Tunnelbana lines in grayscale: shape + label, never colour alone. */
.line { font-family: Helvetica, Arial, sans-serif; font-weight: bold; white-space: nowrap; }
.line-green:before { content: "\25CF  "; }  /* ● */
.line-red:before   { content: "\25A0  "; }  /* ■ */
.line-blue:before  { content: "\25B2  "; }  /* ▲ */

/* Reading page: each sentence is a link to "highlight" it. */
.page p { text-align: left; }
.page a.s { color: #000; text-decoration: none; }
.page a.s.hl { background: #000; color: #fff; }

.progress {
  height: 10px;
  border: 2px solid #000;
  margin: 8px 0 18px 0;
}
.progress span { display: block; height: 100%; background: #000; }

table.tests { width: 100%; border-collapse: collapse; font-family: Helvetica, Arial, sans-serif; font-size: 16px; }
table.tests td { border-bottom: 1px solid #000; padding: 8px 4px; vertical-align: top; }
table.tests td.r { width: 90px; font-weight: bold; text-align: right; }

.foot { margin-top: 28px; }