/* Plain, dense and readable - the same feel as the Production app. */
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 "Segoe UI", Arial, sans-serif; color: #1b1b1b; background: #f4f5f7; }
a { color: #0b6b3a; }

.bar { display: flex; align-items: center; gap: 18px; padding: 10px 16px;
       background: #0b6b3a; color: #fff; flex-wrap: wrap; }
.bar a { color: #fff; text-decoration: none; margin-right: 14px; }
.bar a:hover { text-decoration: underline; }
.brand { font-weight: 700; letter-spacing: .5px; }
.who { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.inline { display: inline; }
.bar button { background: transparent; border: 1px solid rgba(255,255,255,.6);
              color: #fff; border-radius: 3px; padding: 3px 10px; cursor: pointer; }

main { max-width: 1200px; margin: 18px auto; padding: 0 16px; }
h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 22px 0 8px; }

.card { background: #fff; border: 1px solid #dcdfe3; border-radius: 4px; padding: 14px; margin-bottom: 16px; }
.narrow { max-width: 460px; }
.card label { display: block; margin-bottom: 10px; }
.card input { display: block; width: 100%; padding: 7px; border: 1px solid #c3c7cc; border-radius: 3px; }

button.primary, a.button.primary { background: #0b6b3a; color: #fff; border: 0;
    border-radius: 3px; padding: 8px 16px; cursor: pointer; text-decoration: none; display: inline-block; }

.books { margin: 0 0 14px; }
.books a, .books strong { margin-right: 14px; }

.tiles { display: flex; gap: 14px; flex-wrap: wrap; }
.tile { flex: 1 1 180px; background: #fff; border: 1px solid #dcdfe3; border-radius: 4px;
        padding: 18px; text-decoration: none; color: inherit; }
.tile .n { display: block; font-size: 30px; font-weight: 700; }
.tile .t { display: block; color: #555; }
.tile.ok .n { color: #0b6b3a; }
.tile.bad .n { color: #a61b1b; }
.tile.dim .n { color: #666; }

.search { margin-bottom: 12px; }
.search input { padding: 7px; width: 320px; max-width: 70%; border: 1px solid #c3c7cc; border-radius: 3px; }
.search button { padding: 7px 14px; }

table.grid { width: 100%; border-collapse: collapse; background: #fff; }
table.grid th, table.grid td { border: 1px solid #e1e4e8; padding: 6px 8px; text-align: left; vertical-align: top; }
table.grid th { background: #eef1f3; }
table.grid .r, td.r, th.r { text-align: right; }
.struck td { text-decoration: line-through; color: #777; }

.facts { display: grid; grid-template-columns: 190px 1fr; gap: 6px 14px; margin: 0; }
.facts dt { color: #555; }
.facts dd { margin: 0; }

.mono { font-family: Consolas, "Courier New", monospace; }
.small { font-size: 12px; }
.dimtext { color: #777; font-size: 12px; }
.note { color: #555; font-size: 13px; }
.problem { background: #fdecea; border: 1px solid #f5c2bd; color: #8a1c13;
           padding: 10px 12px; border-radius: 3px; }
.foot { max-width: 1200px; margin: 24px auto; padding: 0 16px; color: #777; font-size: 12px; }