/* ============================================================
   Documented — Attorney Portal
   Matches the live marketing site's design language: Inter +
   Spline Sans Mono, blue #1354BC brand, warm-neutral grays.
   (website/attorneys.html is the reference — the portal has no
   build step, so these values are copied in rather than shared
   via import.)
   ============================================================ */

:root {
  --blue: #1354BC;
  --blue-deep: #0F459B;
  --blue-soft: #EAF2FF;

  --ink: #111827;
  --ink-soft: #374151;
  --ink-muted: #6B7280;

  --border: #E5E7EB;
  --surface: #fff;
  --bg: #F9FAFB;

  --success: #16A34A;
  --success-soft: #E7F7EC;
  --success-border: #C8ECD3;

  --danger: #DC2626;
  --danger-soft: #FCE9E7;

  --warn-text: #92400E;
  --warn-soft: #FEF3E2;
  --warn-border: #F5D9A8;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-card: 0 1px 2px rgba(17, 24, 39, .04);
  --shadow-hover: 0 4px 12px rgba(17, 24, 39, .06);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
::selection { background: var(--blue); color: #fff; }

body {
  margin: 0;
  font: 16px/1.55 var(--font-sans);
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0; }

/* ---- page shell ----------------------------------------- */
.page { max-width: 640px; margin: 0 auto; padding: 32px 16px 64px; }

/* ---- header ---------------------------------------------- */
.portal-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.portal-header__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 16px;
}
.portal-header__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.portal-header__brand img { height: 20px; width: auto; display: block; }
.portal-header__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

#account-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-left: auto;
  font-size: 13.5px;
  color: var(--ink-muted);
}
#account-bar span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55vw;
}
#account-bar button {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 13px;
  white-space: nowrap;
  flex: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
#account-bar button:hover { background: var(--bg); border-color: #D1D9E6; }

/* ---- forms ------------------------------------------------ */
form { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }

label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 13.5px; color: var(--ink); }

input {
  font: 15px/1.5 var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .15s, box-shadow .15s;
}
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

button[type="submit"] {
  font: 15px/1.5 var(--font-sans);
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  cursor: pointer;
  align-self: flex-start;
  transition: background .15s, transform .15s;
}
button[type="submit"]:hover:not(:disabled) { background: var(--blue-deep); transform: translateY(-1px); }
button[type="submit"]:disabled { opacity: .65; cursor: default; transform: none; }

/* ---- messages ---------------------------------------------- */
.error { color: var(--danger); font-weight: 600; font-size: 14px; margin: 8px 0; }

.notice {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 16px 0;
}

.warning {
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--warn-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 16px 0;
}

.meta { color: var(--ink-muted); font-size: 13.5px; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  color: var(--blue);
  font: 14px/1.5 var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: color .15s;
}
.link-btn:hover { color: var(--blue-deep); text-decoration: underline; }

/* ---- dashboard / records ------------------------------------ */
.records-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.records-header h1 { margin: 0; }

.client-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 14px 0;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.client-card:hover { border-color: #D1D9E6; box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.client-card h2 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }

.entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 14px 0;
  box-shadow: var(--shadow-card);
}
.entry.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.entry.clickable:hover { border-color: #D1D9E6; box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.entry.undecryptable { border-color: var(--warn-border); border-style: dashed; background: var(--warn-soft); }

/* ---- entry detail -------------------------------------------- */
.detail-section { margin: 20px 0; }
.detail-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.detail-section.warn {
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--warn-text);
  font-size: 14px;
  font-weight: 500;
}

.ok { color: var(--success); font-weight: 600; }
.bad { color: var(--danger); font-weight: 600; }
.warn { color: var(--warn-text); font-weight: 600; }

.hash-block {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  word-break: break-all;
  margin: 6px 0;
}

/* ---- tab navigation ------------------------------------------ */
.tab-row {
  display: flex;
  gap: 4px;
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 16px 0;
}
/* Overrides .tab-row's unconditional `display: flex` below, which otherwise beats
   the browser's default [hidden] rule (author-origin always wins over user-agent-
   origin, regardless of specificity) and would leave the tab row visible pre-sign-in. */
.tab-row[hidden] { display: none; }
.tab {
  font: 14px/1.5 var(--font-sans);
  font-weight: 600;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 4px 10px;
  margin-right: 20px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ---- secondary headings (Settings page sections) --------------- */
h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 28px 0 12px; }
.settings-section:first-of-type h2 { margin-top: 0; }

/* ---- records-view action buttons ------------------------------ */
.records-actions { display: flex; gap: 10px; margin-top: 12px; }
.records-actions button {
  font: 14px/1.5 var(--font-sans);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.records-actions button:hover { background: var(--bg); border-color: #D1D9E6; }
.records-actions button:disabled { opacity: .6; cursor: default; }

/* ---- PDF export (print-only) ----------------------------------- */
#print-area { display: none; }

@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }
  .print-entry { margin: 16px 0; page-break-inside: avoid; }
}