/* Goyodomay: the one stylesheet (spec 8.5: no dashboard JavaScript). */
:root {
  --fg: #1f2328; --muted: #656d76; --line: #d8dee4; --bg-soft: #f6f8fa;
  --link: #0b5cad; --accent: #0f766e; --bar: #14b8a6; --up: #166534; --down: #b91c1c;
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; margin: 0; color: var(--fg); background: #fff; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
pre { background: var(--bg-soft); border: 1px solid var(--line); padding: 0.5rem 0.75rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.muted { color: var(--muted); font-weight: normal; }
.empty { color: var(--muted); font-style: italic; }

/* Top bar: brand, site name, navigation, account */
header.top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 1rem; background: #134e4a; color: #fff; }
header.top a { color: #fff; }
header.top .brand { font-weight: 700; letter-spacing: 0.05em; }
header.top .site-name { font-weight: 600; padding-left: 1rem; border-left: 1px solid #2f7d76; }
header.top nav.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
header.top nav.site-nav a { color: #ccfbf1; }
header.top nav.site-nav a.current { color: #fff; font-weight: 700; border-bottom: 2px solid #5eead4; }
header.top nav.session { margin-left: auto; color: #ccfbf1; font-size: 0.9rem; white-space: nowrap; display: flex; gap: 0.5rem; align-items: center; }
header.top nav.session button { color: #fff; background: transparent; border-color: #2f7d76; padding: 0.1rem 0.6rem; }

/* Tables */
table { border-collapse: collapse; width: 100%; margin-bottom: 0.5rem; }
th, td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.report td:first-child { word-break: break-word; }

/* Flash and forms */
.notice { color: #166534; background: #dcfce7; padding: 0.5rem; }
.alert { color: #991b1b; background: #fee2e2; padding: 0.5rem; }
.field { margin-bottom: 0.75rem; }
.field label { display: block; font-weight: 600; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field textarea { width: 100%; max-width: 32rem; padding: 0.3rem; }
.field p.muted { margin: 0.2rem 0 0; font-size: 0.85rem; }
.field_with_errors input, .field_with_errors textarea { border: 1px solid #b91c1c; }
#error_explanation { color: #991b1b; border: 1px solid #fca5a5; padding: 0.5rem 1rem; margin-bottom: 1rem; }
form.button_to { display: inline; }
button { cursor: pointer; padding: 0.25rem 0.75rem; border: 1px solid var(--line); background: var(--bg-soft); border-radius: 4px; }
button.danger { color: #b91c1c; border-color: #fca5a5; }

/* The period selector, beside each page's heading */
.period { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.75rem; }
form.period-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
form.period-form select, form.period-form input[type=date] { padding: 0.25rem; }
.period-label { color: var(--muted); }

/* Filter chips: "Source: Google ×" */
ul.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0 0 0.75rem; }
li.chip { padding: 0.1rem 0.3rem 0.1rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); font-size: 0.85rem; }
a.chip-remove { display: inline-block; padding: 0 0.35rem; color: var(--muted); }
a.chip-remove:hover { color: var(--down); text-decoration: none; }

/* Metric tiles, each with its change from the previous period */
section.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.tile { border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.75rem; }
.tile .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tile .value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta { font-size: 0.85rem; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--muted); }

/* Bars (the chart): one div per bucket, its height in percent */
.bars { display: flex; gap: 2px; align-items: flex-end; margin-bottom: 1rem; }
.bar-col { flex: 1; min-width: 0; text-align: center; }
.bar-area { position: relative; height: 8rem; background: var(--bg-soft); }
.bar { position: absolute; bottom: 0; left: 0; right: 0; min-height: 1px; background: var(--bar); }
.bar-label { font-size: 0.65rem; color: var(--muted); overflow: hidden; white-space: nowrap; }

/* Report grids and tabs */
.reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0 1.5rem; }
nav.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-bottom: 0.75rem; }
nav.tabs a.current { font-weight: 700; color: var(--fg); border-bottom: 2px solid var(--accent); }
form.search { display: flex; gap: 0.4rem; margin-bottom: 0.75rem; }
form.search input[type=search] { flex: 1; max-width: 24rem; padding: 0.25rem; }
nav.pager { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
a.more { font-size: 0.85rem; }

/* The snippet */
.snippet pre { margin: 0.25rem 0 0.75rem; }
.snippet.large { border: 1px solid var(--line); border-radius: 6px; padding: 0.75rem 1rem; background: #f0fdfa; }