/* NewSong team area: stone page, white panels, bronze accent, same type as the public site */
:root {
  --stone: #F5F4F1; --paper: #FFFFFF; --ink: #1B2533; --ink-soft: #4A5566; --rule: #D9D9D6;
  --bronze: #A97C50; --bronze-deep: #8A6239; --blue: #3F6A97; --hero: #1D3047; --hero-fg: #F0EBE3; --hero-soft: #B7C2CF;
  --warn: #B4412F; --good: #2E6B45;
  --display: "Marcellus", Georgia, serif; --body: "Source Serif 4", Georgia, serif; --label: "Work Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --stone: #121A24; --paper: #18222E; --ink: #ECE7DF; --ink-soft: #A9B3BF; --rule: #2C3846; --bronze: #C4996B; --bronze-deep: #D7AF84; --blue: #8FB0D3; --hero: #0D1520; --warn: #E07A68; --good: #7FC39A; color-scheme: dark } }
:root[data-theme="dark"] { --stone: #121A24; --paper: #18222E; --ink: #ECE7DF; --ink-soft: #A9B3BF; --rule: #2C3846; --bronze: #C4996B; --bronze-deep: #D7AF84; --blue: #8FB0D3; --hero: #0D1520; --warn: #E07A68; --good: #7FC39A; color-scheme: dark }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--stone); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; }
.wrap { max-width: 1040px; margin: 0 auto; padding-inline: 16px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
a { color: var(--blue); }
.label { font: 600 12px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.muted { color: var(--ink-soft); }
[hidden] { display: none !important; }

.tbar { background: var(--hero); color: var(--hero-fg); }
.tbar .wrap { display: flex; align-items: center; gap: 18px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.tbar .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 20px; color: var(--hero-fg); text-decoration: none; }
.tbar .brand svg { width: 30px; height: 30px; fill: var(--bronze); }
.tbar .brand small { font: 600 11px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.tbar nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.tbar nav a { color: var(--hero-soft); text-decoration: none; font: 500 14px var(--label); padding: 6px 10px; }
.tbar nav a:hover, .tbar nav a[aria-current="page"] { color: var(--hero-fg); box-shadow: inset 0 -2px 0 var(--bronze); }
.tbar .who { font: 500 13px var(--label); color: var(--hero-soft); display: flex; gap: 10px; align-items: center; }
.tbar .who button { all: unset; cursor: pointer; color: var(--hero-fg); text-decoration: underline; }
.tbar a:focus-visible, .tbar button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

main { padding-block: 32px 72px; }
.head { display: grid; gap: 6px; margin-bottom: 24px; }
.head h1 { font-size: clamp(30px, 4vw, 40px); }
.panel { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--bronze); padding: 24px; display: grid; gap: 16px; margin-bottom: 20px; }
.panel h2 { font-size: 24px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field .lab { font: 600 12px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.field .hint { font-size: 14px; color: var(--ink-soft); }
input, select, textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--rule); background: var(--stone); color: var(--ink); width: 100%; min-width: 0; }
textarea { min-height: 80px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; border-color: var(--bronze); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--bronze); flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--label); letter-spacing: .04em; padding: 11px 18px; border: 1px solid var(--bronze); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; }
.btn.solid { background: var(--bronze); color: #fff; }
.btn.solid:hover { background: var(--bronze-deep); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.quiet { border-color: var(--rule); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.status { font-size: 14px; color: var(--ink-soft); min-height: 1.3em; }
.status.bad { color: var(--warn); }
.status.good { color: var(--good); }

/* dashboard tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tile { background: var(--paper); border: 1px solid var(--rule); padding: 22px; display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--ink); border-top: 3px solid var(--bronze); }
.tile:hover { border-color: var(--bronze); }
.tile b { font-family: var(--display); font-weight: 400; font-size: 24px; }
.tile span { color: var(--ink-soft); font-size: 15px; }
.tile:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* log in */
.signin { background: var(--hero); color: var(--hero-fg); min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.card { background: var(--paper); color: var(--ink); width: 100%; max-width: 440px; padding: 36px 32px; display: grid; gap: 16px; border-top: 3px solid var(--bronze); }
.card .mark { width: 46px; height: 46px; fill: var(--bronze); }
.card h1 { font-size: 36px; }
.code { letter-spacing: .5em; text-align: center; font-size: 26px; font-variant-numeric: tabular-nums; }
.linkbtn { all: unset; cursor: pointer; color: var(--blue); text-decoration: underline; font-size: 14px; }
.linkbtn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* tables */
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.list > li { padding: 12px 4px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; }
.list > li > * { min-width: 0; }
.list .d { font: 500 13px var(--label); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.list .t b { font-weight: 600; display: block; }
.list .t span { font-size: 14px; color: var(--ink-soft); }
.list .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tag { font: 600 11px var(--label); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--rule); color: var(--ink-soft); }
.tag.miss { border-color: var(--warn); color: var(--warn); }
.tag.off { background: var(--rule); }
.list li.editing { grid-template-columns: 1fr; background: var(--stone); padding: 16px; }
@media (max-width: 640px) { .list > li { grid-template-columns: 1fr; gap: 4px; } .list .tags { justify-content: flex-start; } .panel { padding: 18px; } }
.notice-preview { background: var(--hero); color: var(--hero-fg); padding: 10px 14px; font: 500 15px var(--label); }
.notice-preview a { color: var(--hero-fg); }