/* QuarryOne owner app. Palette from client-plan/src/base.css; system fonts only. */
:root {
  --limestone: #ecede8; --dust: #d5d7d0; --basalt: #1e2326; --basalt-2: #2a3135;
  --yellow: #f5b700; --red: #c4281c; --green: #1e7b4b; --slate: #5b6770; --paper: #fbfbf8;
  --head: "Roboto Condensed", "DejaVu Sans Condensed", "Arial Narrow", "Liberation Sans Narrow", "Helvetica Neue", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--limestone); color: var(--basalt); font: 16px/1.45 var(--body); }
body.has-nav { padding-bottom: 72px; }
a { color: var(--basalt); }
h1, h2 { font-family: var(--head); font-stretch: condensed; font-weight: 700; line-height: 1.1; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.3rem; }
h1 small, h2 small { font: 500 .95rem var(--body); color: var(--slate); margin-left: .4rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--slate); } .small { font-size: .875rem; } .mono, code { font-family: var(--mono); }
.r { text-align: right; }

/* header */
.top { background: var(--basalt); color: var(--paper); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; max-width: 1100px; margin: 0 auto; }
.brand { color: var(--paper); text-decoration: none; font: 700 1.35rem var(--head); font-stretch: condensed; }
.brand b { color: var(--yellow); }
.site-name { font: 700 1.1rem var(--head); font-stretch: condensed; color: var(--dust); flex: 1; }
.switch { display: flex; gap: .3rem; }
.switch select, .switch button { font: inherit; font-size: .9rem; padding: .25rem .4rem; border: 2px solid var(--dust); background: var(--basalt-2); color: var(--paper); }
.logout button { font: inherit; font-size: .9rem; background: none; color: var(--dust); border: 2px solid var(--slate); padding: .25rem .6rem; cursor: pointer; }
.banner { margin: 0; background: var(--red); color: #fff; padding: .7rem 1rem; font-size: 1.05rem; text-align: center; }
.banner b { font: 700 1.25rem var(--head); font-stretch: condensed; margin-right: .4rem; }

/* nav: bottom bar on phone, inline in the header on wide screens */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; background: var(--basalt); border-top: 3px solid var(--yellow); }
.nav a { flex: 1; text-align: center; padding: .85rem 0 .95rem; color: var(--dust); text-decoration: none; font: 700 .95rem var(--head); font-stretch: condensed; }
.nav a[aria-current="page"] { background: var(--yellow); color: var(--basalt); }
@media (min-width: 760px) {
  body.has-nav { padding-bottom: 0; }
  .nav { position: static; border: 0; gap: .25rem; }
  .nav a { flex: none; padding: .35rem .7rem; font-size: 1.05rem; }
  .site-name { flex: none; }
  .switch { margin-right: auto; }
}

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.page-h { margin: .25rem 0 1rem; font-size: 2.1rem; }
.panel { background: var(--paper); border: 2px solid var(--basalt); padding: 1rem; margin: 0 0 1rem; }
.narrow { max-width: 30rem; margin: 2rem auto; }
.lead { font-size: 1.1rem; }
.empty { color: var(--slate); font-size: 1.05rem; margin: .25rem 0; }

/* figures */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .5rem; }
.fig { display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--basalt); border-top: 8px solid var(--yellow); padding: .6rem .7rem; text-decoration: none; color: var(--basalt); }
.fig.warn { border-top-color: var(--red); }
.num { font: 700 2.6rem/1 var(--head); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.lbl { font-size: .9rem; color: var(--slate); margin-top: .2rem; }

/* tags */
.tag { display: inline-block; padding: .1rem .45rem; font-size: .85rem; font-weight: 700; color: #fff; background: var(--slate); }
.tag.go { background: var(--green); } .tag.stop { background: var(--red); } .tag.wait { background: var(--dust); color: var(--basalt); }

/* devices */
.devices { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 760px) { .devices { grid-template-columns: 1fr 1fr; } }
.device { border-left: 6px solid var(--basalt); padding-left: .7rem; }
.dev-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .3rem; }
.facts, .hours { margin: 0; display: grid; gap: .2rem; }
.facts div, .hours div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--dust); padding: .2rem 0; }
dt { color: var(--slate); } dd { margin: 0; text-align: right; font-weight: 600; }
.hours { max-width: 22rem; }

.kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kinds a { display: inline-block; text-decoration: none; border: 2px solid var(--red); padding: .3rem .6rem; font-weight: 600; }
.kinds .count { font: 700 1.2rem var(--head); color: var(--red); margin-right: .2rem; }

/* tables */
table.list { width: 100%; border-collapse: collapse; background: var(--paper); border: 2px solid var(--basalt); }
.list th { text-align: left; font-size: .85rem; color: var(--slate); border-bottom: 2px solid var(--basalt); padding: .45rem .6rem; }
.list td { padding: .55rem .6rem; border-bottom: 1px solid var(--dust); }
.list th.r, .list td.r { text-align: right; }
.list tr.flag td { background: #f6dcd9; }
.num-cell { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel table.list { border: 0; }
@media (max-width: 520px) { .hide-s { display: none; } .list td, .list th { padding: .5rem .35rem; } }

/* forms and buttons */
.btn { display: inline-block; font: 600 1rem var(--body); padding: .5rem .9rem; border: 2px solid var(--basalt); background: var(--paper); color: var(--basalt); text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--basalt); color: var(--paper); }
input, select, textarea { font: inherit; padding: .45rem .5rem; border: 2px solid var(--basalt); background: #fff; color: var(--basalt); width: 100%; }
input[type="checkbox"] { width: auto; }
.filters input, .filters select { min-width: 0; }
label { display: block; font-weight: 600; }
.stack { display: grid; gap: .8rem; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; align-items: end; background: var(--paper); border: 2px solid var(--basalt); padding: .8rem; margin-bottom: 1rem; }
.filters .check { display: flex; gap: .4rem; align-items: center; }
@media (min-width: 760px) { .filters { grid-template-columns: repeat(5, auto); justify-content: start; } }
.error { background: var(--red); color: #fff; padding: .5rem .7rem; margin: .3rem 0; }
.note, .ok-note { border-left: 6px solid var(--yellow); padding: .3rem .7rem; background: var(--paper); }
.ok-note { border-color: var(--green); }

.pager { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: .8rem 0; color: var(--slate); }
.pager-links { display: flex; gap: .5rem; }
.tabs { display: flex; gap: 0; margin-bottom: 1rem; }
.tabs a { padding: .45rem 1.1rem; border: 2px solid var(--basalt); text-decoration: none; font-weight: 700; background: var(--paper); }
.tabs a + a { border-left: 0; }
.tabs a[aria-current="page"] { background: var(--basalt); color: var(--paper); }

.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.alert { background: var(--paper); border: 2px solid var(--basalt); border-left: 10px solid var(--red); padding: .8rem 1rem; }
.alert.closed { border-left-color: var(--slate); }
.alert p { margin: .35rem 0; }
.alert-head { display: flex; justify-content: space-between; gap: .5rem; font: 700 1.25rem var(--head); font-stretch: condensed; }
.when { font: 600 1rem var(--body); color: var(--slate); white-space: nowrap; }
.closed-by { font-size: .9rem; color: var(--slate); }
.close { display: grid; gap: .5rem; margin-top: .5rem; }
.close textarea { min-height: 3rem; }
.close .btn { justify-self: start; }
.close-box summary { cursor: pointer; font-weight: 700; padding: .3rem 0; text-decoration: underline; }