/*
Name: processlens.css
Version: 1.0.0
Purpose: SNAP standard visual shell for every ProcessLens page (standards section 4).
Author: Dwain Henderson Jr. | Superior Networks LLC
Contact: (937) 985-2480 | dhenderson@superiornetworks.biz
Copyright: 2026, Superior Networks LLC
Location: processlens/processlens/common/static/css/processlens.css

Change Log:
  2026-09-29 v1.0.0 - Initial release (Dwain Henderson Jr)
*/

:root {
  --pl-page-bg: #f0f0f0;
  --pl-card-bg: #ffffff;
  --pl-card-border: #d4d1ca;
  --pl-ink: #28251d;
  --pl-black: #1a1a1a;
  --pl-label-bg: #f7f6f2;
  --pl-muted: #7a7974;
  --pl-ok: #2f6b3a;
  --pl-warn: #8a5a00;
  --pl-bad: #9b2c2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pl-page-bg);
  color: var(--pl-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.pl-page {
  max-width: 620px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Deviation D4: recorder/review pages may be wider for long transcripts. */
.pl-page--wide { max-width: 960px; }

.pl-header {
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-card-border);
  border-bottom: 3px solid var(--pl-black);
  border-radius: 8px 8px 0 0;
  padding: 16px 20px 12px;
}

.pl-logo { max-width: 220px; height: auto; display: block; }

.pl-tagline { color: var(--pl-muted); font-size: 13px; margin-top: 6px; }

.pl-nav { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 16px; }
.pl-nav a { color: var(--pl-black); font-weight: bold; text-decoration: none; }
.pl-nav a:hover, .pl-nav a:focus { text-decoration: underline; }

.pl-card {
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-card-border);
  border-top: none;
  padding: 20px;
}

.pl-card h1 { font-size: 22px; margin: 0 0 12px; }
.pl-card h2 { font-size: 17px; margin: 24px 0 8px; }

.pl-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.pl-table th, .pl-table td {
  border: 1px solid var(--pl-card-border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.pl-table th { background: var(--pl-label-bg); width: 40%; font-weight: normal; }

.pl-button {
  display: inline-block;
  background: var(--pl-black);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.pl-button:hover, .pl-button:focus { background: #000000; }

.pl-notice {
  background: var(--pl-label-bg);
  border: 1px solid var(--pl-card-border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
}

.pl-status-ok { color: var(--pl-ok); font-weight: bold; }
.pl-status-warn { color: var(--pl-warn); font-weight: bold; }
.pl-status-bad { color: var(--pl-bad); font-weight: bold; }

.pl-footer {
  background: var(--pl-label-bg);
  border: 1px solid var(--pl-card-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: var(--pl-muted);
  font-size: 11px;
  padding: 10px 20px;
}

code { background: var(--pl-label-bg); padding: 1px 4px; border-radius: 3px; }

@media (max-width: 480px) {
  .pl-page { margin: 12px auto; }
  .pl-card { padding: 16px; }
  .pl-table th { width: 45%; }
}