/* San Andreas DOJ shared design system (1974) */
:root {
  --paper: #f4ead5;
  --paper-dark: #e9dcbe;
  --ink: #2b2118;
  --ink-soft: #5c4632;
  --orange: #c1521f;
  --gold: #d99a2b;
  --avocado: #6a7a33;
  --brown: #5c4632;
  --rust: #a13c22;
  --cream: #fdf6e3;
  --navy: #33302a;
  --shadow: rgba(43, 33, 24, 0.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* nothing pushes the page sideways on a phone */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, table { max-width: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.stripes {
  height: 10px;
  background: linear-gradient(90deg,
    var(--brown) 0 20%, var(--rust) 20% 40%, var(--orange) 40% 60%,
    var(--gold) 60% 80%, var(--avocado) 80% 100%);
}

/* ---------- top navigation ---------- */

/* ACCESS-GATED NAV LINKS
   The nav ships in the HTML, so without this every tab paints for a moment
   before the session is known and the restricted ones are taken out again.
   A signed-out visitor should never see a flash of doors they cannot open.

   These stay hidden until main.js has the session and marks the nav ready.
   By then it has already removed the ones this person cannot follow, so
   whatever is left simply appears. The list mirrors PAGE_ACCESS in
   js/main.js, which is the authority: add a gated page there, add its href
   here. */
nav.dojnav:not(.access-ready) a[href="courts.html"],
nav.dojnav:not(.access-ready) a[href="barexam.html"],
nav.dojnav:not(.access-ready) a[href="roster.html"],
nav.dojnav:not(.access-ready) a[href="judicial.html"],
nav.dojnav:not(.access-ready) a[href="sop.html"] {
  display: none;
}

nav.dojnav {
  background: var(--navy);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 0 10px;
  gap: 2px;
}
nav.dojnav a {
  color: var(--paper-dark);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 14px;
  border-bottom: 3px solid transparent;
}
nav.dojnav a:hover { color: var(--gold); }
nav.dojnav a.active { color: var(--gold); border-bottom-color: var(--gold); }
nav.dojnav a.brand {
  font-family: 'Cooper Black', 'Arial Rounded MT Bold', Georgia, serif;
  color: var(--cream);
  letter-spacing: 3px;
  font-size: 14px;
}

/* ---------- page header ---------- */
header.dojhead {
  background: var(--brown);
  color: var(--cream);
  padding: 30px 20px 24px;
  text-align: center;
}
header.dojhead .state {
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: 6px;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--gold);
}
header.dojhead h1 {
  font-family: 'Cooper Black', 'Arial Rounded MT Bold', Georgia, serif;
  font-size: clamp(30px, 5.5vw, 52px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--rust);
  margin: 6px 0 4px;
}
header.dojhead .sub {
  font-size: 13px;
  color: var(--paper-dark);
  letter-spacing: 2px;
}

/* ---------- layout + panels ---------- */
/* fluid: use the screen we have, on a phone, a tablet, or a wide monitor */
.wrap {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 22px clamp(10px, 2.5vw, 34px) 90px;
}
.panel {
  background: var(--cream);
  border: 2px solid var(--brown);
  border-radius: 8px;
  margin-bottom: 20px;
  /* NOT overflow:hidden. Search dropdowns inside a panel are positioned
     absolutely and were being clipped by it. */
  position: relative;
}
.panel > .phead {
  border-radius: 6px 6px 0 0;
  background: var(--brown);
  color: var(--cream);
  padding: 10px 14px;
  font-family: Georgia, serif;
  letter-spacing: 1px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panel > .pbody { padding: 14px; }

/* ---------- official document rendering ---------- */
.document {
  background: #fffdf6;
  border: 1px solid var(--brown);
  box-shadow: 0 3px 12px var(--shadow);
  padding: clamp(18px, 3vw, 40px);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  /* a court document still reads like paper, but it grows with the screen */
  max-width: 1200px;
  margin: 0 auto;
}
.document h2, .document h3, .document h4 {
  font-family: Georgia, 'Times New Roman', serif;
  text-align: center;
  margin: 10px 0 12px;
  letter-spacing: 1px;
}
.document h2 { font-size: 19px; }
.document h3 { font-size: 16px; }
.document h4 { font-size: 14.5px; }
.document hr { border: 0; border-top: 3px double var(--brown); margin: 12px 0 16px; }
.document p { margin: 10px 0; }
.document ul, .document ol { margin: 10px 0 10px 28px; }
.document li { margin: 4px 0; }
.document .instr { color: #2a4a8a; font-style: italic; }
.document table.doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}
.document table.doc-table th,
.document table.doc-table td {
  border: 1px solid var(--ink-soft);
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}
.document table.doc-table th { background: var(--paper-dark); font-weight: bold; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  border: 2px solid var(--brown);
  background: var(--cream);
  color: var(--brown);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  font-size: 12.5px;
  letter-spacing: 1px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.primary { background: var(--rust); border-color: var(--rust); color: var(--cream); }
.btn.primary:hover { filter: brightness(1.12); }

/* ---------- footer ---------- */
footer.dojfoot {
  text-align: center;
  padding: 26px 16px 40px;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: 1px;
}
footer.dojfoot .links { margin-bottom: 8px; }
footer.dojfoot a { color: var(--rust); text-decoration: none; margin: 0 8px; }
footer.dojfoot a:hover { text-decoration: underline; }

/* ---------- account box in nav ---------- */
#doj-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  font-size: 12px;
}
#doj-account .doj-who { color: var(--gold); font-weight: bold; letter-spacing: 1px; }
#doj-account .doj-who em { color: var(--paper-dark); font-style: normal; font-weight: normal; }
#doj-account a { color: var(--paper-dark); text-decoration: underline; font-size: 12px; padding: 0; border: 0; }
#doj-account a:hover { color: var(--gold); }

/* ---------- login modal ---------- */
#doj-login-modal { display: none; }
#doj-login-modal.open { display: block; }
.doj-modal-back {
  position: fixed; inset: 0; background: rgba(43, 33, 24, 0.55); z-index: 200;
}
.doj-modal {
  position: fixed; z-index: 201;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(400px, 92vw);
  background: var(--paper);
  border: 3px solid var(--brown);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.doj-modal h2 {
  font-family: Georgia, serif;
  color: var(--rust);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.doj-modal-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.doj-modal-tabs button {
  flex: 1;
  border: 2px solid var(--brown);
  background: var(--paper-dark);
  font-family: inherit;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 7px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
}
.doj-modal-tabs button.active { background: var(--brown); color: var(--cream); }
.doj-modal label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 8px 0;
  font-weight: bold;
}
.doj-modal input {
  width: 100%;
  margin-top: 3px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 2px solid var(--brown);
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  font-weight: normal;
}
.doj-modal input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.doj-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.doj-modal-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.doj-modal-msg.bad { color: var(--rust); font-weight: bold; }
.doj-modal-msg.good { color: var(--avocado); font-weight: bold; }

/* ---------- toasts ---------- */
.doj-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translate(-50%, 20px);
  background: var(--avocado);
  color: var(--cream);
  font-weight: bold;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  padding: 11px 22px;
  border-radius: 24px;
  border: 2px solid var(--cream);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 300;
}
.doj-toast.bad { background: var(--rust); }
.doj-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  nav.dojnav { padding: 0 4px; }
  nav.dojnav a { padding: 10px 8px; font-size: 11.5px; letter-spacing: 1px; }
  nav.dojnav a.brand { font-size: 12.5px; letter-spacing: 1.5px; }
  #doj-account { margin-left: 0; width: 100%; justify-content: flex-end; }
  header.dojhead { padding: 20px 12px 16px; }
  header.dojhead .state { letter-spacing: 2px; font-size: 11px; }
  header.dojhead .sub { letter-spacing: 1px; font-size: 12px; }
  header.dojhead h1 { letter-spacing: 1px; }
  .panel > .phead { font-size: 14px; letter-spacing: 0; }
  .document { padding: 14px 12px; font-size: 12.5px; }
  .document table.doc-table { font-size: 11.5px; }
  .document table.doc-table th, .document table.doc-table td { padding: 4px 5px; }
}

@media print {
  nav.dojnav, .stripes, footer.dojfoot, .noprint { display: none !important; }
  body { background: #fff; }
  .document { box-shadow: none; border: 0; padding: 0; }
}