/* Dartout. Looks like 1997, behaves like a website should. One theme, one column, web-safe fonts. */

:root { color-scheme: light; }
html { background: #e4e4e4; }
body { margin: 0; color: #000; font: 17px/1.45 "Times New Roman", Times, Georgia, serif; }
.page { max-width: 680px; margin: 0 auto; min-height: 100vh; background: #fff; padding: 16px 24px 40px; border-left: 1px solid #a0a0a0; border-right: 1px solid #a0a0a0; box-sizing: border-box; }

a { color: #0000ee; }
a:visited { color: #551a8b; }
a:active { color: #ff0000; }

.mono { font-family: "Courier New", Courier, monospace; }
.small { font-size: 13.5px; }
.muted { color: #555; }
hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 12px 0; }

header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.logo { font: bold 26px/1 "Times New Roman", Times, serif; letter-spacing: .18em; color: #000; text-decoration: none; }
.logo::before { content: "🎯 "; letter-spacing: 0; }
nav { font-size: 14px; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }

h2 { font-size: 24px; line-height: 1.2; margin: 18px 0 8px; }
h3 { font-size: 18px; margin: 20px 0 6px; }
.tag { font-size: 22px; font-style: italic; margin: 14px 0 6px; }
p { margin: 8px 0; }

.notice { background: #ffffcc; border: 1px solid #000; padding: 8px 12px; margin: 10px 0; }

/* Controls: the beveled Win95 button, the inset field. Intentional. */
.btn, button.btn { font: bold 15px "Courier New", Courier, monospace; color: #000; background: #d4d0c8; border: 2px outset #f0f0f0; padding: 6px 14px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; }
.btn:visited { color: #000; }
.btn:active { border-style: inset; padding: 7px 13px 5px 15px; }
.btn.big { font-size: 24px; padding: 14px 30px; border-width: 3px; }
.btn.big:active { padding: 15px 29px 13px 31px; }
input[type="text"], input[type="email"], select { font: 15px "Courier New", Courier, monospace; color: #000; background: #fff; border: 2px inset #c0c0c0; padding: 4px 6px; max-width: 100%; box-sizing: border-box; }
input[type="text"]:focus, input[type="email"]:focus, select:focus, .btn:focus { outline: 2px dotted #000; outline-offset: 1px; }
label { cursor: pointer; }
form.inline { display: inline; }
form.throw .btn.big { margin: 6px 0; }
form.login input[type="email"] { width: 18em; }
form.status { border-top: 1px dotted #999; margin-top: 12px; padding-top: 8px; display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }
form.status input[type="text"] { flex: 1 1 14em; }
form.profile { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }

/* The dart itself. */
.dart { border: 3px double #000; padding: 14px 18px 12px; margin: 14px 0 8px; background: #fffef8; }
.dart h2 { margin: 6px 0 10px; font-size: 26px; }
.dart h2 a { color: #000; }
.dart h2 a:visited { color: #000; }
.facts { border-collapse: collapse; font-family: "Courier New", Courier, monospace; font-size: 14px; margin: 6px 0 10px; }
.facts th { text-align: left; color: #555; font-weight: normal; padding: 2px 12px 2px 0; vertical-align: top; white-space: nowrap; }
.facts td { padding: 2px 0; vertical-align: top; }
.faq { border-collapse: collapse; margin: 6px 0 10px; }
.faq th { text-align: left; font-weight: normal; padding: 3px 14px 3px 0; vertical-align: top; }
.faq td { padding: 3px 0; vertical-align: top; font-weight: bold; }
.desc { white-space: pre-line; margin: 10px 0; }
details.desc summary { cursor: pointer; list-style: none; }
details.desc summary::-webkit-details-marker { display: none; }
details.desc summary::after { content: " [more]"; font: 13px "Courier New", Courier, monospace; color: #0000ee; }
details.desc[open] summary::after { content: ""; }
details.desc[open] summary { display: inline; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.prov { margin: 8px 0 0; }

/* Share row: a link you can select, a copy button if the browser can, mailto/sms otherwise. */
.share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.share input[type="text"] { flex: 1 1 12em; min-width: 0; font-size: 13px; padding: 3px 6px; }
.share .btn { font-size: 12px; padding: 4px 8px; }
.share .btn:active { padding: 5px 7px 3px 9px; }

/* The feed. */
ul.feed { list-style: none; padding: 0; margin: 10px 0; }
ul.feed li { padding: 10px 0; border-bottom: 1px dotted #999; }
ul.feed li:last-child { border-bottom: 0; }
ul.feed .hit { font-size: 19px; margin: 2px 0; }
ul.feed li.superseded { opacity: .55; }
ul.feed li.superseded .hit { text-decoration: line-through; }
.tag.went, .tag.skipped { font: bold 11px "Courier New", Courier, monospace; padding: 1px 5px; border: 1px solid; margin-left: 4px; font-style: normal; text-transform: uppercase; }
.tag.went { color: #006400; border-color: #006400; }
.tag.skipped { color: #8b0000; border-color: #8b0000; }
.tag.gold { color: #7a5c00; border-color: #c9a400; background: #fff6c2; }
.record { margin: 6px 0 10px; }
form.profile .mail { flex-basis: 100%; }
form.profile .mail p { margin: 0; }

/* The counter. Green on black, as is tradition. */
.counter { font: bold 15px "Courier New", Courier, monospace; letter-spacing: 3px; background: #000; color: #33ff33; padding: 2px 4px 2px 7px; border: 2px inset #888; vertical-align: middle; }

footer p { margin: 6px 0; }

@media (max-width: 480px) {
  .page { padding: 12px 14px 32px; border: 0; }
  .logo { font-size: 22px; }
  .dart { padding: 12px; }
  .dart h2 { font-size: 22px; }
  form.login input[type="email"] { width: 100%; }
}