/* A working tool a paralegal uses all day, so legibility and predictable
   hit targets still come first - but that doesn't mean it has to look
   bare. No framework - the whole stylesheet is small enough to read. */

:root {
  --bg: #eef1f6;
  --card: #ffffff;
  --ink: #1a1c1f;
  --muted: #5f6672;
  --line: #dce0e8;
  --accent: #1f4b8e;
  --accent-dark: #163864;
  --accent-ink: #ffffff;
  --error: #c22a20;
  --error-dark: #9c2119;
  --ok: #1a6b3c;
  --shadow: 0 1px 2px rgba(20, 24, 32, 0.06), 0 4px 16px rgba(20, 24, 32, 0.06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: var(--accent-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.brand-logo:hover { background: rgba(255, 255, 255, 0.12); }

.topbar-right { display: flex; align-items: center; gap: 8px; position: relative; }
.whoami { font-size: 13px; opacity: 0.9; }

/* Each top-bar button opens a panel instead of being the whole action -
   two menus (DocuSign, Account) in place of five-plus loose
   buttons. The panel is positioned relative to the menu, not the
   button, so it doesn't shift if the toggle's own label changes width
   (DocuSign's does, between "DocuSign ▾" and "DocuSign ✓ ▾"). */
.menu { position: relative; }

/* :not([hidden]), not a bare .menu-panel rule - a plain `display: flex`
   here would outrank the browser's own `[hidden] { display: none }`
   (same specificity, but this stylesheet loads after the UA one), and
   the panel would stay laid out - and clickable - underneath whatever
   [hidden] was supposed to be hiding it from. */
.menu-panel:not([hidden]) {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
}

.menu-panel .whoami {
  color: var(--muted);
  opacity: 1;
  font-size: 13px;
  word-break: break-all;
  margin: 0;
}

/* The user's actual name, not just their email - sits directly above
   it and in the same dark ink as everything else that matters on the
   page, so it reads as the primary line and the email as secondary. */
.account-name {
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}
.account-name:empty { display: none; }

.menu-panel button { width: 100%; }
.menu-panel .hint:empty { display: none; }

/* A colour the eye finds before it reads the text: green means DocuSign
   is connected, and the dot echoes the connect button's red so the two
   states read as the same signal in two places. */
#docusign-status:not(:empty)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 6px;
  vertical-align: middle;
}

main { max-width: 860px; margin: 0 auto; padding: 24px 20px; }

h1 { font-size: 21px; margin: 0 0 16px; font-weight: 600; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 8px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.narrow { max-width: 400px; }

/* The sign-in card is the first thing anyone sees - it earns its own
   moment rather than sitting flush under the top bar like every other
   view. Only while visible: :not([hidden]) keeps the [hidden] attribute
   in charge of showing/hiding, this only changes how it's laid out. */
#view-login:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
}

#view-login .card {
  width: 100%;
  padding: 28px;
}

#view-login h1 { text-align: center; }

.field { margin-bottom: 12px; }

.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.required { color: var(--error); }

.control {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.control:hover { border-color: #b7bfcc; }

.control:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* Currency fields: the £ sits in the field rather than in the typed
   value, so the amount that reaches the document is just the number. */
.prefixed { display: flex; align-items: stretch; }
.prefixed .prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: var(--bg);
  color: var(--muted);
}
.prefixed .control { border-radius: 0 4px 4px 0; }

button {
  font: inherit;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

button:disabled { opacity: 0.5; cursor: not-allowed; }
button:active:not(:disabled) { transform: translateY(1px); }

.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.primary:hover:not(:disabled) { background: var(--accent-dark); border-color: var(--accent-dark); }

.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.secondary:hover:not(:disabled) { background: var(--bg); }
.secondary.danger { color: var(--error); border-color: var(--error); }
.secondary.danger:hover:not(:disabled) { background: #fdf1f0; }

/* The connect button is a warning, not a neutral action - a solid red
   fill makes "DocuSign isn't connected" register before anyone reads
   the label, the same way an unsaved-changes dot or a low-battery icon
   does. Disconnect, by contrast, is a fine/expected state, so it stays
   .secondary. */
.danger { background: var(--error); color: #fff; border-color: var(--error); }
.danger:hover:not(:disabled) { background: var(--error-dark); border-color: var(--error-dark); }

.small { padding: 6px 11px; font-size: 13px; }

.hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.error { color: var(--error); }

.status { padding: 0 20px; font-size: 14px; }
.status.info, .status.ok, .status.error {
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.status.ok { color: var(--ok); }
.status.error { color: var(--error); }

/* A field just told to be required-but-empty (see PackForm.markInvalid)
   needs to look different from every other field on the tab, not just
   be named in the status bar sentence above the form. */
.control.invalid { border-color: var(--error); }
.control.invalid:focus { outline-color: var(--error); }

.progress:not([hidden]) { padding: 10px 20px 0; background: #fff; border-bottom: 1px solid var(--line); }
.progress-track { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }
.progress .hint { margin: 6px 0 10px; }

/* A grey placeholder shape rather than static "Loading…" text - reads
   as "something is actually happening" instead of a page that might
   just be stuck, especially over a slow connection. */
@keyframes skeleton-pulse {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.skeleton {
  height: 56px;
  background: linear-gradient(90deg, var(--line) 25%, #eef1f6 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: skeleton-pulse 1.4s ease infinite;
}

.privacy-note {
  font-size: 13px;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 0 0 16px;
}

.pack-card, .ch-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pack-card {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.pack-card:has(button.primary:not(:disabled)):hover {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 1px var(--accent);
}

/* Sits directly under the field it belongs to (see ui.js) rather than
   in one shared box elsewhere on the page - a light card of its own so
   it still reads as a distinct, scannable result rather than blending
   into the field list above it. */
.ch-results:not(:empty) {
  margin-top: 8px;
  padding: 4px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.ch-result {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.ch-result:first-of-type { border-top: 0; }
.ch-results:empty { display: none; }

/* Capped and scrollable rather than an unbounded list - a common
   borrower name can return a full page of hits, and letting them push
   the rest of the form down out of view is worse than a short list the
   user has to scroll within. */
.ch-result-list { max-height: 280px; overflow-y: auto; }
.ch-results .control { margin-bottom: 8px; }

.form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.form-head h1 { margin: 0; }

.guarantor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.guarantor-head h2 { margin: 0; }

.guarantor { background: var(--bg); }
.guarantor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 12px;
}

.actions { margin: 20px 0 40px; }

/* Tabbed sections, matching the desktop app's layout - a long form read
   as one endless scrolling column with no sense of how far through it
   the user was. Each tab's card(s) are still always in the DOM (see
   ui.js), just [hidden] - required-field validation and generation
   don't need to know tabs exist. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.tab {
  background: transparent;
  border: none;
  border-radius: 6px 6px 0 0;
  padding: 10px 16px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover:not(.active) { background: rgba(31, 75, 142, 0.06); color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel .card:first-child { margin-top: 0; }

@media (max-width: 640px) {
  .pack-card, .ch-result { flex-direction: column; align-items: stretch; }

  .topbar { flex-wrap: wrap; row-gap: 10px; padding: 10px 14px; }

  .topbar-right {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  /* A long address would otherwise be the single widest thing in the
     bar and push the buttons off the edge on its own. */
  .whoami {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Buttons wrap as whole buttons, never mid-label. */
  .topbar button { white-space: nowrap; }
}

/* Report an issue. The dialog is deliberately the same width as the
   sign-in card - it is a short form, not a page. */
.report-dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  background: var(--card);
  color: var(--ink);
}

.report-dialog::backdrop { background: rgba(26, 28, 31, 0.45); }

.report-dialog h2 { margin-bottom: 4px; }
/* The "which pack" line belongs to the heading, not to the field below
   it, so it needs the gap on its underside rather than its top. */
.report-dialog .hint { margin: 0 0 14px; }

.report-dialog textarea.control { resize: vertical; min-height: 120px; }

.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}