/* Harbourline Supply — the target application's own look, deliberately
   unlike the toolkit's, so it reads as a separate site you are testing. */

:root {
  --ink: #1d2733;
  --ink-2: #566573;
  --line: #d7dee6;
  --paper: #ffffff;
  --wash: #f4f7fa;
  --sea: #1f6f8b;
  --sea-dark: #175467;
  --good: #17694a;
  --good-bg: #e6f4ec;
  --bad: #9b2226;
  --bad-bg: #fdecec;
  --warn-bg: #fdf6e3;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--wash);
}

.brandbar {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 13px 18px;
  background: var(--sea); color: #fff;
}
.brandbar .logo { font-weight: 700; letter-spacing: -0.01em; font-size: 16px; }
.brandbar .tag { font-size: 12px; opacity: 0.85; }

.screen { padding: 18px; max-width: 620px; }
h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.01em; }
h3 { margin: 0 0 4px; font-size: 15px; }
p.sub { margin: 0 0 14px; color: var(--ink-2); font-size: 13px; }

label.f { display: block; margin-bottom: 11px; }
label.f > span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
input {
  width: 100%; padding: 9px 11px; font-size: 16px; font-family: inherit;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 5px;
}
input:focus { outline: 2px solid var(--sea); outline-offset: 1px; border-color: var(--sea); }

button.primary {
  padding: 9px 16px; min-height: 40px; font-size: 14px; font-weight: 600;
  font-family: inherit; color: #fff; background: var(--sea);
  border: 1px solid var(--sea-dark); border-radius: 5px; cursor: pointer;
}
button.primary:hover { background: var(--sea-dark); }
button.primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.out { margin-top: 14px; }
.out:empty { margin-top: 0; }

.ok, .err, .note {
  padding: 10px 12px; border-radius: 5px; font-size: 14px;
  border: 1px solid var(--line); background: var(--paper);
}
.ok { background: var(--good-bg); border-color: #bfe0cd; color: var(--good); }
.err { background: var(--bad-bg); border-color: #f2c9c9; color: var(--bad); }
.note { background: var(--warn-bg); border-color: #ecdca8; color: #6b4e07; }
.ok strong, .err strong { display: block; margin-bottom: 2px; }
.mono { font-family: var(--mono); font-size: 12.5px; word-break: break-word; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13.5px; background: var(--paper); }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); background: var(--wash); }
td { font-family: var(--mono); font-size: 12.5px; word-break: break-word; }

.redeem { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

.busy {
  margin: 0 18px; padding: 8px 12px; font-size: 13px;
  background: var(--warn-bg); border: 1px solid #ecdca8; border-radius: 5px;
  color: #6b4e07;
}

@media (max-width: 480px) { .screen { padding: 14px; } }