/**
 * TME Core component styles.
 *
 * Tokens are the authoritative TME palette from TME-styleguide.pdf, and the
 * typefaces are the pair already approved for print — Montserrat for display,
 * Lora for body, IBM Plex Mono for licence numbers and money.
 *
 * Mono is load-bearing here: an NMLS number must be unmistakable, and every
 * table of limits has to align, so tabular-nums is not optional.
 */

:root {
	--tme-navy: #053047;
	--tme-navy-2: #0a4160;
	--tme-teal: #219eba;
	--tme-orange: #fa8503;
	--tme-ltblue: #8cc9e5;
	--tme-gold: #e8a33d;
	--tme-ink: #053047;
	--tme-ink-2: #3d5666;
	--tme-ink-3: #7b8fa0;
	--tme-line: #dfe7ec;
	--tme-teal-lt: #e8f4f8;
	--tme-teal-ln: #cfe6ee;
	--tme-mist: #eef3f6;
	--tme-peach: #fdefe0;
	--tme-surface: #ffffff;
	--tme-radius: 6px;
	--tme-font-display: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
	--tme-font-body: Lora, Georgia, "Times New Roman", serif;
	--tme-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Licence numbers, NMLS IDs and any figure that must be read exactly. */
.tme-mono,
.tme-nmls {
	font-family: var(--tme-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.tme-muted { color: var(--tme-ink-3); }
.tme-label {
	font-family: var(--tme-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tme-ink-3);
}

/* ---------- Buttons. Every one says what happens. ---------- */
.tme-btn {
	display: inline-block;
	font-family: var(--tme-font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	padding: 11px 18px;
	border-radius: var(--tme-radius);
	text-decoration: none;
	border: 1px solid transparent;
}
.tme-btn--primary { background: var(--tme-orange); color: #fff; }
.tme-btn--primary:hover { background: #e07803; color: #fff; }
.tme-btn--secondary { background: transparent; color: var(--tme-navy); border-color: var(--tme-navy); }
.tme-btn--secondary:hover { background: var(--tme-navy); color: #fff; }
.tme-btn:focus-visible { outline: 3px solid var(--tme-teal); outline-offset: 2px; }

/* ---------- Loan officer card ---------- */
.tme-lo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin: 28px 0;
}
.tme-lo-card {
	display: flex;
	gap: 16px;
	background: var(--tme-surface);
	border: 1px solid var(--tme-line);
	border-radius: 9px;
	padding: 18px;
}
.tme-lo-card__photo img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.tme-lo-card__body { min-width: 0; }
.tme-lo-card__name {
	font-family: var(--tme-font-display);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 2px;
	line-height: 1.25;
}
.tme-lo-card__name a { color: var(--tme-navy); text-decoration: none; }
.tme-lo-card__name a:hover { color: var(--tme-teal); }
.tme-lo-card__role {
	font-family: var(--tme-font-display);
	font-size: 12.5px;
	color: var(--tme-ink-3);
	margin: 0 0 4px;
}
.tme-lo-card__nmls { font-size: 12.5px; color: var(--tme-ink-2); margin: 0 0 6px; }
.tme-lo-card__states { font-size: 12.5px; color: var(--tme-ink-2); margin: 0 0 8px; line-height: 1.45; }
.tme-lo-card__contact { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13.5px; }
.tme-lo-card__contact li { margin-bottom: 2px; }
.tme-lo-card__contact a { color: var(--tme-teal); }
.tme-lo-card__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Byline ---------- */
.tme-byline {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid var(--tme-line);
	border-bottom: 1px solid var(--tme-line);
	margin: 22px 0 28px;
}
.tme-byline__photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.tme-byline__author,
.tme-byline__reviewer { margin: 0; font-size: 14.5px; color: var(--tme-ink-2); }
.tme-byline__author a,
.tme-byline__reviewer a { color: var(--tme-navy); font-weight: 600; }
.tme-byline__dates {
	margin: 4px 0 0;
	font-family: var(--tme-font-display);
	font-size: 11.5px;
	color: var(--tme-ink-3);
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ---------- Tables: the moat. County limits live here. ---------- */
.tme-table-wrap {
	overflow-x: auto;                 /* 67 county rows scroll IN the table, */
	-webkit-overflow-scrolling: touch;/* never sideways-scrolling the page.  */
	border: 1px solid var(--tme-line);
	border-radius: 8px;
	margin: 22px 0;
	background: var(--tme-surface);
}
.tme-table { border-collapse: collapse; width: 100%; font-family: var(--tme-font-display); font-size: 13.5px; }
.tme-table thead th {
	background: var(--tme-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	padding: 11px 14px;
	white-space: nowrap;
	position: sticky;
	top: 0;
}
.tme-table tbody th,
.tme-table tbody td {
	padding: 11px 14px;
	border-top: 1px solid var(--tme-line);
	vertical-align: top;
	color: var(--tme-ink-2);
	text-align: left;
}
.tme-table tbody th { color: var(--tme-ink); font-weight: 600; }
.tme-table tbody tr:nth-child(even) th,
.tme-table tbody tr:nth-child(even) td { background: var(--tme-teal-lt); }
.tme-table td.tme-num, .tme-table th.tme-num {
	text-align: right;
	font-family: var(--tme-font-mono);
	font-variant-numeric: tabular-nums;
}

/* ---------- The data-effective line. Sits under every figures table. ---------- */
.tme-data-effective {
	font-size: 13px;
	color: var(--tme-ink-3);
	font-style: italic;
	margin: -12px 0 24px;
}

/* ---------- State licensing block ---------- */
.tme-state-licensing {
	background: var(--tme-mist);
	border: 1px solid var(--tme-line);
	border-left: 3px solid var(--tme-teal);
	border-radius: 0 8px 8px 0;
	padding: 20px 24px;
	margin: 26px 0;
}
.tme-state-licensing h2 { font-family: var(--tme-font-display); font-size: 19px; margin: 0 0 12px; color: var(--tme-navy); }
.tme-deflist { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 6px 18px; font-size: 14.5px; }
.tme-deflist dt { font-family: var(--tme-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tme-ink-3); align-self: center; }
.tme-deflist dd { margin: 0; color: var(--tme-ink-2); align-self: center; }
.tme-note { font-size: 13px; color: var(--tme-ink-3); line-height: 1.55; }

/* ---------- NAP ---------- */
.tme-nap { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--tme-ink-2); }
.tme-nap__name { font-family: var(--tme-font-display); font-weight: 600; color: var(--tme-navy); }

/* ---------- The compliance footer. Never collapsed, never behind a modal. ---------- */
.tme-compliance-footer {
	background: var(--tme-navy);
	color: #c8dae4;
	padding: 34px 0 40px;
	margin-top: 60px;
}
.tme-compliance-footer__inner { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.tme-disclosure { margin: 0 0 14px; }
.tme-disclosure__text { font-size: 12.5px; line-height: 1.6; color: #b7cdd9; margin: 0; max-width: 90ch; }
.tme-disclosure__text strong { color: #fff; }
.tme-disclosure__text a { color: var(--tme-ltblue); }
.tme-disclosure--global { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(140, 201, 229, 0.22); }
.tme-eho { flex: none; color: var(--tme-ltblue); margin-top: 2px; }
.tme-disclosure--regz {
	background: var(--tme-peach);
	border-left: 3px solid var(--tme-gold);
	border-radius: 0 6px 6px 0;
	padding: 14px 18px;
	margin: 14px 0 0;
}
.tme-disclosure--regz .tme-disclosure__text { color: #6b4a12; }
.tme-regulated { margin: 24px 0; }
.tme-legal-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(140, 201, 229, 0.22); }
.tme-legal-nav a { font-family: var(--tme-font-display); font-size: 12px; color: var(--tme-ltblue); text-decoration: none; }
.tme-legal-nav a:hover { color: #fff; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* ---- Loan officer directory (v1.6) ------------------------------------ */
.tme-dir__bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 28px}
.tme-dir__q{flex:1 1 320px;min-width:0;padding:14px 16px;font:inherit;font-size:16px;
  border:1px solid #cfd6dd;border-radius:0;background:#fff;color:#0d1b2a}
.tme-dir__q:focus{outline:2px solid #0d1b2a;outline-offset:1px}
.tme-dir__count{margin:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#5a6672}
.tme-dir__count strong{color:#0d1b2a}
.tme-dir__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px}
.tme-dir__list .tme-person{display:flex;flex-direction:column;gap:6px;padding:22px 20px;
  background:#f5f7f9;border:0;margin:0}
.tme-person__link{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.tme-person__link:hover .tme-person__name{text-decoration:underline}
.tme-person__shot{width:64px;height:64px;object-fit:cover;border-radius:0;display:block}
.tme-person__initials{width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  background:#0d1b2a;color:#fff;font-weight:700;font-size:20px;letter-spacing:.04em}
.tme-person__name{font-weight:700;font-size:17px;line-height:1.25;color:#0d1b2a}
.tme-dir__list .tme-badge{font-size:12px;letter-spacing:.06em;color:#5a6672;text-transform:none}
.tme-person__office{font-size:14px;color:#5a6672}
.tme-person__tel{font-size:14px;color:#0d1b2a}
.tme-dir__empty{margin:24px 0 0;color:#5a6672}
@media(max-width:600px){.tme-dir__list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
/* The type-ahead filter sets [hidden]; a display:flex card outranks the UA
   [hidden]{display:none} rule, so restate it explicitly. */
.tme-dir__list .tme-person[hidden]{display:none!important}
.tme-dir__list .tme-badge{align-self:flex-start}

/* ---- Home value estimator (v1.7) -------------------------------------- */
.tme-avm{background:#f5f7f9;border-top:3px solid var(--tme-navy,#0d1b2a);padding:34px 30px 30px;margin:0}
.tme-avm__h{margin:0 0 8px;font-family:var(--tme-font-display);font-size:clamp(24px,3vw,32px);line-height:1.15;color:#0d1b2a}
.tme-avm__sub{margin:0 0 22px;font-size:16px;line-height:1.55;color:#41505f;max-width:62ch}
.tme-avm__row{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px}
.tme-avm__field{display:flex;flex-direction:column;gap:6px;flex:1 1 150px;min-width:0}
.tme-avm__field--wide{flex:3 1 300px}
.tme-avm__field--zip{flex:0 0 130px}
.tme-avm__field>span{font-family:var(--tme-font-display);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:#5a6672}
.tme-avm__field>span em{font-style:normal;text-transform:none;letter-spacing:0;color:#8794a1}
.tme-avm__field input{padding:14px 16px;font:inherit;font-size:16px;border:1px solid #cfd6dd;
  border-radius:0;background:#fff;color:#0d1b2a;width:100%}
.tme-avm__field input:focus{outline:2px solid #0d1b2a;outline-offset:1px}
.tme-avm__go{display:inline-block;padding:15px 30px;border:0;border-radius:0;cursor:pointer;
  font-family:var(--tme-font-display);font-weight:600;font-size:15px;letter-spacing:.02em;
  background:#0d1b2a;color:#fff}
.tme-avm__go:hover{background:#16304a}
.tme-avm__go[disabled]{opacity:.6;cursor:default}
.tme-avm__err{margin:14px 0 0;color:#8a2b1f;font-size:15px}
.tme-avm__out{margin:26px 0 0;padding:26px 24px;background:#fff;border-left:3px solid var(--tme-gold,#e8a33d)}
.tme-avm__addr{margin:0 0 6px;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#5a6672}
.tme-avm__price{margin:0;font-family:var(--tme-font-display);font-weight:700;
  font-size:clamp(34px,6vw,52px);line-height:1;color:#0d1b2a}
.tme-avm__range{margin:10px 0 0;font-size:16px;color:#41505f}
.tme-avm__pending{margin:6px 0 0;font-size:17px;line-height:1.5;color:#0d1b2a;max-width:56ch}
.tme-avm__note{margin:8px 0 0;font-size:13px;color:#8794a1}
.tme-avm__cta{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.tme-avm__legal{margin:20px 0 0;font-size:12.5px;line-height:1.6;color:#6b7783;max-width:88ch}
@media(max-width:640px){
  .tme-avm{padding:26px 20px 24px}
  .tme-avm__field--zip{flex:1 1 120px}
  .tme-avm__go{width:100%}
}