:root{
  --navy:#23384d;
  --navy-2:#2f4862;
  --teal:#0f7c90;
  --ink:#23384d;
  --muted:#5f7184;
  --rule:#d8e0e8;
  --tint:#f6f8fb;
  --page:#ffffff;
  --canvas:#e7ecf1;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:Arial, Helvetica, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- screen chrome ---------- */
.bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 20px;
  background:var(--navy);color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.bar-brand{display:flex;align-items:center;gap:12px;min-width:0;}
.bar-mark{
  font-weight:700;letter-spacing:1px;font-size:13px;
  border:1.5px solid rgba(255,255,255,.55);border-radius:3px;padding:4px 7px;
}
.bar-title{font-size:14px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn{
  font:inherit;font-size:13px;line-height:1;
  padding:9px 13px;border-radius:4px;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.30);
  transition:background .15s ease,border-color .15s ease;
}
.btn:hover{background:rgba(255,255,255,.20);}
.btn-primary{background:var(--teal);border-color:var(--teal);font-weight:700;}
.btn-primary:hover{background:#0d6b7c;border-color:#0d6b7c;}

.hint{
  max-width:8.5in;margin:16px auto 0;padding:12px 16px;
  background:#fff;border-left:4px solid var(--teal);border-radius:3px;
  font-size:12.5px;line-height:1.55;color:var(--muted);
}
.hint strong{color:var(--navy-2);}
.chip{
  display:inline-block;padding:1px 6px;border:1px solid var(--rule);border-radius:3px;
  background:var(--tint);color:var(--navy-2);font-size:11.5px;
}

/* ---------- the page ---------- */
.sheet{
  width:8.5in;
  margin:20px auto 60px;
  padding:0.5in;
  background:var(--page);
  box-shadow:0 6px 26px rgba(35,56,77,.16);
  zoom:var(--fit,1);
}

.fitbadge{
  font-size:12px;letter-spacing:.2px;padding:6px 10px;border-radius:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  white-space:nowrap;
}
.fitbadge.warn{background:rgba(214,120,20,.35);border-color:rgba(240,170,80,.7);}
.fitbadge.over{background:rgba(192,57,43,.40);border-color:rgba(231,116,113,.75);}

.letterhead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:8px;border-bottom:2px solid var(--navy-2);
}
.logo{width:2.35in;height:auto;display:block;}
.lh-meta{text-align:right;font-size:9.5px;line-height:1.5;color:var(--muted);}
.lh-name{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy-2);}
.lh-line{white-space:nowrap;}

.doc-title-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  margin:14px 0 10px;
}
.doc-title{
  margin:0;font-size:17px;line-height:1.2;letter-spacing:.4px;
  text-transform:uppercase;color:var(--navy);font-weight:700;
}
.doc-ids{font-size:9.5px;line-height:1.6;text-align:right;color:var(--muted);min-width:2.5in;}
.doc-ids .k{display:inline-block;text-transform:uppercase;letter-spacing:.8px;margin-right:6px;}
.doc-ids .v{font-weight:700;color:var(--navy-2);}

.lede{font-size:10.5px;line-height:1.5;margin:0 0 11px;}

.block{margin:0 0 9px;}
.block-title{
  margin:0 0 5px;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--teal);padding-bottom:4px;border-bottom:1px solid var(--rule);
}

table.grid{width:100%;border-collapse:collapse;font-size:10.5px;}
table.grid td,table.grid th{border-bottom:1px solid var(--rule);padding:4px 8px;vertical-align:top;text-align:left;}
table.two-col td.label{width:34%;font-weight:700;color:var(--navy-2);background:var(--tint);}

ul.bullets,ol.conds{margin:0;padding-left:18px;font-size:10.5px;line-height:1.45;}
ul.bullets li,ol.conds li{margin-bottom:3px;padding-right:18px;position:relative;}
ul.bullets li::marker{color:var(--teal);}
ol.conds li::marker{color:var(--teal);font-weight:700;}

.fine{font-size:9.5px;line-height:1.55;color:var(--muted);margin:6px 0 0;}

.signoff{font-size:10px;line-height:1.5;}
.signoff-name{font-weight:700;color:var(--navy);font-size:11px;}
.signoff-role{color:var(--muted);}

.doc-foot{margin-top:11px;}
.doc-foot p{font-size:8.5px;line-height:1.5;color:var(--muted);margin:0;}
.foot-rule{border-top:1px solid var(--rule);margin:7px 0 5px;}
.foot-line{font-size:8.5px;letter-spacing:.3px;color:var(--muted);text-align:center;}

/* ---------- editing affordances ---------- */
[contenteditable="true"]{outline:none;border-radius:2px;}
[contenteditable="true"]:hover{background:rgba(15,124,144,.06);}
[contenteditable="true"]:focus{
  background:rgba(15,124,144,.10);
  box-shadow:0 0 0 1px rgba(15,124,144,.45);
}

.rowctl{width:22px;padding:0 !important;border-bottom:1px solid var(--rule);}
button.x{
  border:none;background:none;cursor:pointer;color:#b6c2ce;
  font-size:14px;line-height:1;padding:2px 4px;
}
button.x:hover{color:#c0392b;}
ul.bullets button.x,ol.conds button.x{position:absolute;right:0;top:0;}
button.add{
  margin-top:6px;font:inherit;font-size:11px;
  background:var(--tint);color:var(--navy-2);
  border:1px dashed #b9c6d3;border-radius:3px;padding:5px 10px;cursor:pointer;
}
button.add:hover{background:#eef2f7;border-color:var(--teal);color:var(--teal);}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--navy);color:#fff;font-size:13px;padding:10px 16px;border-radius:4px;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- print ---------- */
@page{size:Letter;margin:0.5in;}

@media print{
  body{background:#fff;}
  .no-print,.bar,.hint,.toast{display:none !important;}
  .sheet{
    width:auto;margin:0;padding:0;box-shadow:none;
    zoom:var(--fit,1);
  }
  .rowctl{display:none !important;}
  ul.bullets li,ol.conds li{padding-right:0;}
  [contenteditable="true"]:hover,[contenteditable="true"]:focus{background:none;box-shadow:none;}
  .block,.avoid-break,.signoff,.doc-foot{break-inside:avoid;page-break-inside:avoid;}
  tr,li{break-inside:avoid;page-break-inside:avoid;}
  thead{display:table-header-group;}
  .letterhead{break-after:avoid;}
  a{color:inherit;text-decoration:none;}
}

/* ---------- small screens ---------- */
@media screen and (max-width:900px){
  .sheet{width:100%;padding:24px 18px 28px;margin:12px 0 40px;zoom:1;}
  .hint{margin:12px 12px 0;max-width:none;}
  .letterhead{flex-direction:column;align-items:flex-start;gap:12px;}
  .lh-meta{text-align:left;}
  .lh-line{white-space:normal;}
  .logo{width:2in;}
  .doc-title-row{flex-direction:column;gap:10px;}
  .doc-ids{text-align:left;min-width:0;}
}