@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url("assets/manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* HTS Systems brand palette, based on the public htssystems.co.uk theme. */
:root {
  color-scheme: light;
  --ink: #111310;
  --paper: #eeeee7;
  --lime: #d4ff3f;
  --line: #c8cac0;
  --panel: #f7f8f0;
  --soft: #e3e6d9;
  --muted: #56604d;
  --focus: #425706;
  --warning: #7a3e0a;
  --display: Manrope, "DM Sans", system-ui, sans-serif;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 2;
  padding: .65rem 1rem;
  background: var(--lime);
  color: var(--ink);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 85px;
  padding: .4rem max(1rem, calc((100% - 1240px) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.brand-logo {
  display: block;
  position: relative;
  width: 190px;
  height: 62px;
  flex: 0 0 auto;
  overflow: hidden;
}

.brand-logo img {
  position: absolute;
  display: block;
  width: 170%;
  height: auto;
  max-width: none;
  left: -35%;
  top: 50%;
  transform: translateY(-50%);
}

.brand-label {
  border-left: 1px solid var(--line);
  padding-left: 1rem;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

main { max-width: 1280px; margin: auto; padding: 0 1.25rem 3rem; }
#status { margin: .8rem 0; color: var(--ink); font-weight: 600; }
#status:empty { margin: 0; }
#status:not(:empty) { border-left: 4px solid var(--lime); padding: .45rem .75rem; background: var(--panel); }

.gate {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  max-width: 1060px;
  margin: clamp(1.25rem, 8vw, 6rem) auto;
  border: 1px solid var(--line);
  background: var(--panel);
}

.gate-intro,
.gate-form,
.gate-compact { padding: clamp(1.25rem, 4vw, 3.5rem); }

.gate-intro {
  border-right: 1px solid var(--line);
  background-color: var(--soft);
  background-image: linear-gradient(90deg, #1113100b 1px, transparent 1px),
                    linear-gradient(#1113100b 1px, transparent 1px);
  background-size: 28px 28px;
}

.gate-form { align-self: center; }
.gate-compact { display: block; max-width: 590px; }
.gate-intro h1 { font-size: clamp(2.65rem, 7vw, 5.8rem); }
.gate-intro p { max-width: 29ch; margin-bottom: 0; }
.brand-dot { color: #637b13; }

.tag {
  display: inline-block;
  padding: .35rem .55rem;
  background: var(--lime);
  color: var(--ink);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

h1, h2, h3 { font-family: var(--display); }
h1 {
  margin: .55rem 0;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.065em;
}
h2 { margin: .2rem 0 .85rem; font-size: 1.35rem; font-weight: 750; line-height: 1.2; letter-spacing: -.035em; }
p, small { color: var(--muted); }
label { display: block; margin: .75rem 0; font-size: .92rem; font-weight: 650; }

input, textarea, select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: .35rem;
  padding: .65rem .7rem;
  background: #fff;
  border: 1px solid #7c8574;
  border-radius: 3px;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
}

input[type="checkbox"] { display: inline-block; width: auto; min-height: auto; accent-color: var(--focus); }
textarea { min-height: 6rem; }

button {
  min-height: 44px;
  padding: .55rem .85rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--lime);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover:not(:disabled) { background: #e0ff72; }
button.secondary { background: transparent; color: var(--ink); }
button.secondary:hover:not(:disabled) { background: var(--soft); }
button[aria-current="true"] { border-color: var(--ink); background: var(--lime); color: var(--ink); }
button:disabled { opacity: .55; cursor: default; }

.heading, .row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.workspace-heading { padding: clamp(1.25rem, 4vw, 2.5rem) 0 .7rem; }
.workspace-heading h1 { margin-bottom: .25rem; }
.card, .metric { min-width: 0; border: 1px solid var(--line); border-radius: 3px; padding: clamp(.95rem, 2vw, 1.4rem); }
.card { background: var(--panel); }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: .65rem; margin: .7rem 0; }
.metrics:empty { display: none; }
.metric { background: var(--soft); }
.metric strong { display: block; font: 750 clamp(1.35rem, 3vw, 2rem)/1.2 var(--display); letter-spacing: -.055em; overflow-wrap: anywhere; }
.metric small { display: block; margin-top: .25rem; }

nav, .actions { display: flex; flex-wrap: wrap; gap: .45rem; margin: .75rem 0; }
nav {
  padding: .55rem;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
}
nav button {
  border-color: #666b5f;
  background: transparent;
  color: var(--paper);
  font-size: .9rem;
}
nav button:hover:not(:disabled) { background: #3d4538; }
nav button[aria-current="true"],
nav button[aria-current="true"]:hover:not(:disabled) { border-color: var(--lime); background: var(--lime); color: var(--ink); }
nav button:focus-visible { outline-color: var(--lime); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .85rem; }
.list { max-height: 24rem; overflow: auto; }
.entry { padding: .7rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.entry:last-child { border-bottom: 0; }
.entry p { white-space: pre-wrap; margin: .35rem 0; }
.list button { width: 100%; text-align: left; margin: .2rem 0; }
.bubble { margin: .55rem 0; padding: .75rem; border-radius: 3px; background: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.out { border-left: 3px solid var(--focus); }
.notice { color: var(--warning); }
#books_image { display: block; max-width: min(100%, 620px); max-height: 65vh; margin: .8rem 0; border-radius: 3px; }

.op-stack { display: grid; gap: .85rem; }
.op-toolbar { margin: .7rem 0; }
.op-toolbar:empty { display: none; }
.op-toolbar label { max-width: 440px; }
.op-fields, .op-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.op-fields { gap: 0 1rem; }
.op-products { gap: .55rem; margin: .7rem 0; }
.op-products button { text-align: left; }
.op-stack summary, dialog summary { cursor: pointer; padding: .65rem 0; }
.op-stack pre { font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.op-stack details > summary { overflow-wrap: anywhere; }

dialog {
  width: min(94vw, 700px);
  max-height: 85vh;
  padding: 1.25rem;
  overflow: auto;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--panel);
  color: var(--ink);
}
dialog::backdrop { background: #111310a6; }
dialog a { color: var(--focus); text-underline-offset: .15em; }
.vault-preview { display: block; max-width: 100%; max-height: 52vh; margin: .75rem auto; object-fit: contain; }

#print { display: none; }
#print table { width: 100%; border-collapse: collapse; }
#print th, #print td { padding: .4rem; border-bottom: 1px solid var(--line); text-align: left; }

@media (max-width: 700px) {
  .site-header { min-height: 68px; }
  .brand-logo { width: 145px; height: 48px; }
  .brand, .brand-label { gap: .65rem; }
  .brand-label { padding-left: .65rem; font-size: .62rem; }
  .gate, .grid { grid-template-columns: minmax(0, 1fr); }
  .gate-intro { border-right: 0; border-bottom: 1px solid var(--line); }
  .gate-break { display: none; }
  .list { max-height: 15rem; }
}

@media (max-width: 480px) {
  main { padding-inline: .8rem; }
  .site-header { padding-inline: .8rem; }
  .brand-logo { width: 118px; height: 40px; }
  .brand-label { max-width: 8rem; }
  .op-fields { grid-template-columns: minmax(0, 1fr); }
  nav button { flex: 1 1 auto; }
}

@media print {
  body { background: white; color: var(--ink); }
  body > .site-header, body > .skip-link, main > * { display: none !important; }
  main { padding: 0; }
  main > #print { display: block !important; max-width: 740px; margin: 1rem auto; }
  #print .print-header { border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; padding-bottom: .45rem; }
  #print h1 { font-size: 2rem; }
  #print p { color: var(--ink); }
}

.header-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
#mobileNavigation { display: none; }
#offlineNotice { padding: .65rem .85rem; border-left: 4px solid var(--warning); background: var(--panel); }
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
.site-header { padding-top: max(.4rem, env(safe-area-inset-top)); }
@media (max-width: 700px) {
  #mobileNavigation { display: block; margin: .75rem 0; }
  #nav { display: none; }
  .header-actions button { padding-inline: .65rem; }
  button, input, select, textarea { min-height: 44px; }
  input, select, textarea { font-size: 1rem; }
  input[type="checkbox"] { min-height: auto; }
}

.wa-grid { margin-top: 1rem; }
.wa-grid .card { min-width: 0; overflow-wrap: anywhere; }
.wa-grid .bubble form { margin-top: .75rem; }
.wa-grid details { margin: 1rem 0; }
.wa-grid details summary { cursor: pointer; }