/* Harbor Help — warm/light brand matching docs.html, privacy.html, nologs.html */

:root {
  --bg:#fbf7f0; --bg-2:#f4eee2; --surface:#ffffff;
  --border:#e6dfd2; --border-2:#d8cfb8;
  --text:#1a2420; --muted:#6b7a72; --soft:#a6b1a8;
  --accent:#1f5d6b; --accent-2:#2e7e92; --accent-soft:rgba(31,93,107,0.10);
  --gold:#c98a52; --danger:#b3563f;
  --font-h:'DM Serif Display',Georgia,serif;
  --font-b:'DM Sans',-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  --font-m:'DM Mono',ui-monospace,Menlo,monospace;
  --radius:12px; --radius-sm:8px;
  --shadow-1:0 1px 3px rgba(26,36,32,0.06),0 8px 22px rgba(26,36,32,0.09);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-b); font-weight:300; line-height:1.7; font-size:16px;
}
body::before {
  content:''; position:fixed; inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:60px 60px; opacity:0.4; pointer-events:none; z-index:0;
}

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Top nav (header in base.html) */
header {
  padding:24px 32px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  position:relative; z-index:10; background:var(--bg);
  max-width:1100px; margin:0 auto;
}
header > a { font-family:var(--font-m); font-size:14px; color:var(--accent);
  letter-spacing:0.1em; text-decoration:none; font-weight:500; }
header > a strong { font-weight:500; }
header nav { display:flex; gap:24px; align-items:center; }
header nav a {
  font-family:var(--font-m); font-size:12px; color:var(--muted);
  text-decoration:none; letter-spacing:0.08em; transition:color 0.2s;
}
header nav a:hover { color:var(--accent); text-decoration:none; }
header nav span {
  font-family:var(--font-m); font-size:11px; color:var(--accent);
  border:1px solid var(--accent); padding:4px 12px; letter-spacing:0.06em;
}

/* Main */
main {
  max-width:760px; margin:0 auto; padding:60px 24px 80px;
  position:relative; z-index:1;
}

h1 {
  font-family:var(--font-h); font-size:clamp(36px,5vw,56px); font-weight:400;
  line-height:1.1; margin-bottom:20px; color:var(--text);
}
h2 {
  font-family:var(--font-h); font-size:clamp(22px,3vw,28px); font-weight:400;
  margin:48px 0 20px; color:var(--text);
}
h3 { font-size:16px; font-weight:500; margin:24px 0 10px; color:var(--text); }
p { color:#3d4a45; margin-bottom:16px; font-size:15px; line-height:1.7; }

ul, ol { padding-left:22px; margin-bottom:16px; }
li { color:#3d4a45; font-size:15px; margin-bottom:8px; line-height:1.6; }
li strong { color:var(--text); font-weight:500; }

/* Forms */
form { background:var(--surface); border:1px solid var(--border);
       padding:32px; margin:24px 0; }
form label { display:block; font-family:var(--font-m); font-size:11px;
             color:var(--accent); letter-spacing:0.1em; text-transform:uppercase;
             margin:14px 0 6px; font-weight:600; }
form label:first-of-type { margin-top:0; }
form input[type="email"], form input[type="text"], form input:not([type]),
form select, form textarea {
  width:100%; background:var(--bg); border:1px solid var(--border);
  color:var(--text); font-family:var(--font-b); font-size:14px;
  padding:12px 14px; outline:none; transition:border 0.15s;
}
form input:focus, form select:focus, form textarea:focus {
  border-color:var(--accent);
}
form input[readonly] { background:var(--bg-2); color:var(--muted); }
form textarea { font-family:var(--font-b); line-height:1.6; resize:vertical; }
form button {
  margin-top:18px; font-family:var(--font-m); font-size:12px;
  color:var(--bg); background:var(--accent); border:1px solid var(--accent);
  padding:12px 24px; letter-spacing:0.1em; cursor:pointer;
  text-transform:uppercase; transition:all 0.15s;
}
form button:hover { background:var(--accent-2); border-color:var(--accent-2); }

[role="alert"] {
  background:#b3563f15; border-left:3px solid var(--danger);
  padding:14px 18px; margin-bottom:20px; color:var(--text); font-size:14px;
}

/* Ticket view + agent inbox */
article {
  border:1px solid var(--border); background:var(--surface);
  padding:18px 22px; margin-bottom:14px;
}
article header {
  background:transparent; border:0; padding:0 0 8px 0; max-width:none;
  margin:0; display:block;
}
article header strong {
  font-family:var(--font-m); font-size:11px; color:var(--accent);
  letter-spacing:0.1em; text-transform:uppercase;
}
article header time {
  font-family:var(--font-m); font-size:11px; color:var(--muted);
  margin-left:12px;
}
article pre {
  font-family:var(--font-b); font-size:14px; color:#3d4a45;
  white-space:pre-wrap; word-wrap:break-word; line-height:1.6;
}

table {
  width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--border); margin:16px 0;
}
table th {
  font-family:var(--font-m); font-size:11px; color:var(--accent);
  letter-spacing:0.08em; text-transform:uppercase;
  padding:10px 14px; text-align:left; border-bottom:1px solid var(--border);
  background:var(--bg-2);
}
table td {
  padding:10px 14px; font-size:14px; color:#3d4a45;
  border-bottom:1px solid var(--border);
}
table tr:last-child td { border-bottom:0; }

/* Footer */
footer {
  border-top:1px solid var(--border); padding:28px 32px;
  margin-top:80px; position:relative; z-index:1;
  font-family:var(--font-m); font-size:11px; color:var(--muted);
  letter-spacing:0.08em; max-width:1100px; margin-left:auto; margin-right:auto;
  display:flex; gap:16px; flex-wrap:wrap;
}
footer a {
  font-family:var(--font-m); font-size:11px; color:var(--muted);
  text-decoration:none; letter-spacing:0.08em;
}
footer a:hover { color:var(--accent); text-decoration:none; }

@media (max-width:640px) {
  header { padding:18px 20px; flex-direction:column; gap:14px; align-items:flex-start; }
  header nav { flex-wrap:wrap; gap:14px; }
  main { padding:36px 20px 60px; }
  form { padding:20px; }
}