:root {
  --bg: #f5f2ea;
  --panel: #ffffff;
  --line: #e6e1d5;
  --ink: #2a2a28;
  --soft: #6b675f;
  --faint: #a29d92;
  --accent: #2e9b62;
  --accent-dark: #237a4d;
  --accent-soft: #e1f3e8;
  --danger: #c23b26;
  --danger-soft: #fbe7e3;
  --warn: #8a6100;
  --warn-soft: #fff1cc;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { font-size: 15px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Leelawadee UI", "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.55;
}

a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .6rem; }
h2:first-child { margin-top: 0; }
p { margin: 0 0 .8rem; }

/* ---- frame */

.frame { display: grid; grid-template-columns: 13.5rem 1fr; min-height: 100vh; }

.side {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 1.2rem .8rem;
  display: flex;
  flex-direction: column;
}
.side ul { list-style: none; margin: 1rem 0; padding: 0; flex: 1; }
.side li a {
  display: block;
  padding: .45rem .8rem;
  border-radius: .5rem;
  color: var(--ink);
  text-decoration: none;
}
.side li a:hover { background: var(--bg); }
.side li a.on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }

.brand { font-weight: 700; font-size: 1.15rem; color: var(--accent-dark); text-decoration: none; padding: 0 .8rem; margin: 0; }

.who { border-top: 1px solid var(--line); padding: .8rem .8rem 0; font-size: .9rem; color: var(--soft); }
.who span { display: block; overflow-wrap: anywhere; }

main { padding: 1.6rem 2rem 4rem; min-width: 0; max-width: 78rem; }

.alone { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: 1.6rem 1.8rem 1.8rem;
  width: 100%;
  max-width: 25rem;
}
.box .brand { padding: 0; margin-bottom: .4rem; }

@media (max-width: 760px) {
  .frame { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .side ul { display: flex; flex-wrap: wrap; gap: .2rem; }
  main { padding: 1.2rem 1rem 3rem; }
}

/* ---- messages */

.notice, .warning, .error {
  padding: .6rem .9rem;
  border-radius: .5rem;
  margin: 0 0 1rem;
}
.notice { background: var(--accent-soft); color: var(--accent-dark); }
.warning { background: var(--warn-soft); color: var(--warn); }
.error { background: var(--danger-soft); color: var(--danger); }

.empty { color: var(--soft); padding: 1.2rem; border: 1px dashed var(--line); border-radius: .6rem; background: var(--panel); }

/* ---- panels and tables */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.2rem;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: 0 0 1.4rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; padding: .9rem 1.1rem; }
.card b { display: block; font-size: 1.7rem; line-height: 1.2; color: var(--accent-dark); }
.card span { color: var(--soft); font-size: .9rem; }

.bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.bar .grow { flex: 1; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: .7rem; overflow: hidden; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; color: var(--soft); font-weight: 600; background: #faf8f3; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .sub { display: block; color: var(--soft); font-size: .87rem; }
td.ad { max-width: 30rem; overflow-wrap: anywhere; }

.badge { display: inline-block; padding: .05rem .6rem; border-radius: 1rem; font-size: .82rem; white-space: nowrap; background: #f1eee6; color: var(--soft); }
.badge.good { background: var(--accent-soft); color: var(--accent-dark); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }

code, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: .92em; }

.key {
  display: block;
  width: 100%;
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: .9rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #faf8f3;
  overflow-wrap: anywhere;
  resize: vertical;
}

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; }
dl.facts dt { color: var(--soft); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---- forms */

form.stack { display: grid; gap: .9rem; max-width: 40rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 600px) { .two { grid-template-columns: 1fr; } }

/* align-content: fields side by side stay level when only one of them has a hint under it */
.field { display: grid; gap: .25rem; align-content: start; border: 0; padding: 0; margin: 0; min-width: 0; }
.label { font-weight: 600; font-size: .92rem; padding: 0; }
.req { color: var(--danger); font-weight: 400; }
.hint { color: var(--soft); font-size: .87rem; }
.problem { color: var(--danger); font-size: .9rem; }
.count { color: var(--soft); font-size: .85rem; justify-self: end; }
.count.over { color: var(--danger); font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="url"], input[type="search"], select, textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: #fffdf9;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.bad input, .bad select, .bad textarea { border-color: var(--danger); }

.checks { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.checks label, .tick span { display: inline-flex; gap: .4rem; align-items: center; }

button, .button {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: .5rem;
  padding: .5rem 1.1rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button:hover { background: var(--accent-dark); color: #fff; }
button.quiet, .button.quiet { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 400; }
button.quiet:hover, .button.quiet:hover { background: var(--bg); color: var(--ink); }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger-soft); font-weight: 400; }
button.danger:hover { background: var(--danger-soft); }
button.link { background: none; border: 0; padding: 0; color: var(--accent-dark); font-weight: 400; text-decoration: underline; }
button.small, .button.small { padding: .2rem .7rem; font-size: .9rem; }

form.inline { display: inline; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---- does an ad fit? */

ul.fit { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
ul.fit li { padding: .4rem .7rem; border-radius: .5rem; background: #faf8f3; font-size: .92rem; }
ul.fit li.no { color: var(--soft); }
ul.fit li.watch { background: var(--warn-soft); color: var(--warn); }

/* ---- small bar chart made of table cells */

.meter { display: inline-block; height: .6rem; min-width: 2px; border-radius: .3rem; background: var(--accent); vertical-align: middle; margin-right: .5rem; }
td.wide { width: 45%; }
td.wide .meter { display: block; margin: .45rem 0 0; }

.top { margin-top: .8rem; }
ul.plain { margin: 0; padding-left: 1.2rem; }

/* buttons at the end of a table row: the cell stays a cell */
td.actions { display: table-cell; white-space: nowrap; text-align: right; }
td.actions > * { margin-left: .3rem; }