:root {
  --ink: #182430;
  --paper: #fafaf8;
  --muted: #66707c;
  --line: #dadfe4;

  --blueprint: #1d4e79;
  --blueprint-bright: #2e7db8;
  --blueprint-deep: #0f2e4a;

  --danger: #b3261e;
  --ok: #146c2e;
  --warn: #9a6700;
  --flag: #e8873a;

  /* legacy aliases used by a few older rules below */
  --border: var(--line);
  --text: var(--ink);
  --bg: var(--paper);
  --accent: var(--blueprint);
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  margin: 0;
}

.mono {
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

a:not(.btn) { color: var(--blueprint); transition: color 0.1s ease; }
a:not(.btn):hover { color: var(--blueprint-bright); }
a:not(.btn):visited { color: var(--blueprint-deep); }

.icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.2em;
  margin-right: 0.35rem;
  flex-shrink: 0;
}
.icon.standalone { margin-right: 0; }

header.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
header.topbar > div { flex-wrap: wrap; row-gap: 0.4rem; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand .logo-mark { width: 26px; height: 26px; }

header.topbar a { color: var(--ink); text-decoration: none; }
header.topbar nav { display: flex; gap: 0.15rem; }
header.topbar nav a {
  font-weight: 500;
  color: var(--muted);
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
  transition: background-color 0.1s ease, color 0.1s ease;
}
header.topbar nav a:hover { color: var(--ink); background: #eef3f8; }

.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.75rem; }
.page-header h1 { margin: 0; }

@media (max-width: 640px) {
  /* Below this width the two topbar halves already wrap onto their own
     rows (header.topbar's own flex-wrap) — but each row's *children* were
     still wrapping inline too, turning "Drawings / Projects /
     Engineering Changes" into an unscannable run-on cluster with no
     grouping and sub-44px tap targets. Stacking them vertically restores
     both. */
  header.topbar nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  header.topbar nav a { padding: 0.5rem 0.6rem; margin: 0 -0.6rem; }

  /* Same issue on every list page's header row: h1 + primary action button
     side by side with no wrap safety valve, so the button's own text wraps
     mid-word once the heading eats most of the width (observed on "New
     document" / "New ECN"; "New project" only survived by the accident of
     a shorter heading). Stack instead of squeeze. */
  .page-header { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .page-header .btn { justify-content: center; }
}

main { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
tbody tr { transition: background-color 0.1s ease; }
tbody tr:hover { background: #eef3f8; }
th {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem; margin-bottom: 1rem; overflow-x: auto; }
.card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 5px;
  border: 1px solid var(--blueprint);
  background: var(--blueprint);
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  line-height: 1.4;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.btn:hover { background: var(--blueprint-bright); border-color: var(--blueprint-bright); }
.btn.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: var(--paper); border-color: var(--muted); }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #942019; border-color: #942019; }

/* Icon-only, soft-color actions — for paired approve/reject controls that
   need to stay compact and inline regardless of surrounding column width. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.1s ease;
}
.btn-icon .icon { margin-right: 0; width: 1.15em; height: 1.15em; }
.btn-icon.soft-ok { background: #e6f4ea; color: var(--ok); }
.btn-icon.soft-ok:hover { background: #d3ecda; }
.btn-icon.soft-danger { background: #fbe9e7; color: var(--danger); }
.btn-icon.soft-danger:hover { background: #f7d9d5; }

/* Stamped, rectangular — a title-block field, not a SaaS pill. */
.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
}
.badge.draft { background: #eee; color: var(--muted); border-color: #ddd; }
.badge.pending_approval { background: #fff4e0; color: var(--warn); border-color: #f0dcb0; }
.badge.released { background: #e6f4ea; color: var(--ok); border-color: #bfe2cb; }
.badge.superseded { background: #eee; color: var(--muted); border-color: #ddd; }
.badge.obsolete { background: #fbe9e7; color: var(--danger); border-color: #f3c9c4; }
.badge.live { background: #e6f4ea; color: var(--ok); border-color: #bfe2cb; }
.badge.closed { background: #eee; color: var(--muted); border-color: #ddd; }
/* ECN-specific statuses — "approved" here is intentionally distinct from
   revision's .released green, so an approved ECN doesn't visually read as
   a released drawing. */
.badge.submitted { background: #fff4e0; color: var(--warn); border-color: #f0dcb0; }
.badge.approved { background: #e8f0f9; color: var(--blueprint); border-color: #c7d9ea; }
.badge.implemented { background: #e6f4ea; color: var(--ok); border-color: #bfe2cb; }
.badge.open { background: #fff4e0; color: var(--warn); border-color: #f0dcb0; }
.badge.resolved { background: #e6f4ea; color: var(--ok); border-color: #bfe2cb; }

/* Custom chevron replaces the native arrow so the control matches the rest
   of the blueprint theme instead of looking like an unstyled form default. */
.select {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366707c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 15px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
}
.select:hover { border-color: var(--muted); }
.select:focus-visible { outline: 2px solid var(--blueprint-bright); outline-offset: 1px; }
.select::-ms-expand { display: none; }

input[type="file"] { font-size: 0.9rem; color: var(--muted); }
input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  margin-right: 0.75rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}
input[type="file"]::file-selector-button:hover { border-color: var(--muted); }

.error { color: var(--danger); margin-bottom: 1rem; }

dialog.sign-dialog {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem;
  width: 380px;
  max-width: calc(100vw - 2rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
dialog.sign-dialog::backdrop { background: rgba(15, 46, 74, 0.4); }
dialog.sign-dialog h3 { font-size: 1rem; }

.annotation-layer { position: relative; display: inline-block; max-width: 100%; }
.annotation-layer img { display: block; }
.annotation-layer[data-can-annotate="true"] { cursor: crosshair; }
.annotation-marker {
  position: absolute;
  border: 2px solid var(--flag);
  background: rgba(232, 135, 58, 0.12);
  pointer-events: none;
}
.annotation-marker.resolved { border-color: var(--muted); border-style: dashed; background: transparent; }
.annotation-marker.drafting { border-color: var(--blueprint-bright); background: rgba(46, 125, 184, 0.12); }

.topbar-menu { position: relative; }
.topbar-menu summary { list-style: none; cursor: pointer; }
.topbar-menu summary::-webkit-details-marker { display: none; }
.topbar-menu[open] summary { border-color: var(--muted); }
.topbar-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 0.4rem;
  z-index: 10;
}
.topbar-menu-panel a {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.topbar-menu-panel a:hover { background: var(--paper); }

.search-box { position: relative; }
.search-box svg { position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box input[type="search"] {
  width: 100%; padding: 0.5rem 0.6rem 0.5rem 2.2rem;
  border: 1px solid var(--line); border-radius: 5px; font-size: 1rem;
}

form.stacked label { display: block; margin-bottom: 0.9rem; }
form.stacked input, form.stacked textarea, form.stacked select {
  display: block; width: 100%; margin-top: 0.3rem;
  padding: 0.5rem; border: 1px solid var(--line); border-radius: 5px; font-size: 1rem;
  font-family: inherit;
}
form.stacked input:focus, form.stacked textarea:focus, form.stacked select:focus,
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--blueprint-bright);
  outline-offset: 1px;
}

/* --- Login: the one deliberate "hero" moment. Cyanotype blueprints are
   literally white/pale lines on Prussian blue — this is that, rendered as a
   CSS grid, rather than a generic gradient-hero background. --- */
.login-shell {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--blueprint-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 80px 80px, 80px 80px;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: #eaf1f8;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.login-brand .logo-mark { width: 34px; height: 34px; }
.login-card {
  width: 320px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}