/* Onvanto colours follow its native Paper/Ink/AccentColor; structure comes from tokens/site.css. */
:root {
  color-scheme: light;
  --bg: #faf9f5;
  --bg-2: color-mix(in srgb, var(--bg), var(--text) 3%);
  --surface: #fffdf8;
  --text: #141413;
  --text-soft: #52665e;
  --accent: #176859;
  --accent-text: var(--accent);
  --accent-ink: #faf9f5;
  --line: color-mix(in srgb, var(--text) 18%, var(--bg));
  --danger: #9d302c;
  --warning-bg: color-mix(in srgb, var(--danger) 7%, var(--bg));
}
header.nav { border-bottom: 1px solid var(--line); }
header.nav > span { margin-right: auto; color: var(--text-soft); font-size: var(--step--1); }
main { padding-block: var(--sp-4); }
.intro { max-width: var(--measure-wide); margin-bottom: var(--sp-4); }
.intro h1 { font-size: var(--step-3); margin-bottom: var(--sp-2); }
.intro > p:last-child { color: var(--text-soft); }
button,input,select,textarea { font: inherit; min-height: 44px; }
input,select,textarea {
  color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); max-width: 100%;
}
.btn { justify-content: center; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
:is(select,textarea):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.toolbar,.actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; margin-block: var(--sp-2); }
.toolbar strong { margin-right: auto; font-size: var(--step--1); }
.actions .btn,.toolbar .btn { font-size: var(--step--1); }
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap: var(--sp-2); }
.card,.panel {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius);
  padding: var(--sp-3); margin-bottom: var(--sp-2); box-shadow: var(--shadow-1);
}
.card h3 { margin-block: var(--sp-1); }
.panel h2,dialog h2 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.card p,.panel p { margin-block: var(--sp-1); }
.badge {
  display: inline-block; padding: var(--sp-0) var(--sp-1); border-radius: var(--radius-sm);
  background: var(--bg-2); font-size: var(--step--1); font-weight: 650;
}
.warning { color: var(--danger); background: var(--warning-bg); padding: var(--sp-2); border-radius: var(--radius-sm); }
.ok { color: var(--accent-text); }
.muted,.boundary { color: var(--text-soft); font-size: var(--step--1); }
.boundary { border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-4); }
#workspace > nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-block: var(--sp-3); }
#workspace > nav .btn[aria-current=true] { background: var(--text); color: var(--bg); border-color: var(--text); }
label { display: flex; flex-direction: column; gap: var(--sp-1); font-weight: 600; margin-block: var(--sp-2); }
input[type=checkbox] { min-height: 24px; width: 24px; }
dialog {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-3);
  width: min(36rem,94vw); max-height: 90vh; overflow: auto; background: var(--bg); color: var(--text);
}
dialog::backdrop { background: color-mix(in srgb,var(--text) 45%,transparent); }
dialog footer { display: flex; justify-content: flex-end; gap: var(--sp-1); margin-top: var(--sp-3); padding-top: var(--sp-2); background: none; }
#message:not(:empty) { padding: var(--sp-2); border-radius: var(--radius-sm); background: var(--bg-2); }
#form-error { color: var(--danger); }
#login { max-width: var(--measure); }
#qr-image { width: 16rem; background: white; }
#qr-value,.detail { overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
th,td { text-align: left; border-bottom: 1px solid var(--line); padding: var(--sp-2); vertical-align: top; }
.table-wrap { overflow-x: auto; }
.calendar-bar { font-variant-numeric: tabular-nums; }
.detail { white-space: pre-wrap; font-size: var(--step--1); }
details { margin-block: var(--sp-2); }
summary { cursor: pointer; font-weight: 600; }
@media(max-width:600px) {
  header.nav { gap: var(--sp-1); }
  header.nav > span { flex-basis: 100%; order: 3; }
  main { padding-block: var(--sp-3); }
  .toolbar { align-items: stretch; }
  .toolbar strong { flex-basis: 100%; }
  .toolbar .btn { flex: 1; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; animation: none !important; }
}
@media print {
  body > * { display: none; }
  #qr-label { display: block; position: static; border: 0; }
  #qr-label button { display: none; }
}