/* The Insights section: a listing of cards and a single reading column.
   Everything else on these pages comes from style.css. */

/* The site's standard backdrop. .hero-backdrop draws it from the top of
   whatever carries the class, which has to be positioned for that to work. */
.insights-hero,.article.hero-backdrop{position:relative}

.insights-title{font-size:34px;font-weight:800;letter-spacing:-0.6px;margin:0 0 10px}

.insight-list{display:grid;gap:16px;max-width:760px;margin:0 auto}
.insight-card{
  display:block;padding:24px 26px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);color:var(--text);text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.insight-card:hover{border-color:var(--line-hover);transform:translateY(-1px)}
.insight-card-meta{font-size:12.5px;font-weight:600;color:var(--muted-2);letter-spacing:.2px}
.insight-card h2{font-size:21px;font-weight:800;letter-spacing:-0.3px;line-height:1.3;margin:8px 0}
.insight-card p{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.insight-card-more{font-size:13.5px;font-weight:700;color:var(--brand)}

.insight-latest{color:var(--brand);font-weight:800;letter-spacing:.6px;text-transform:uppercase}

/* Older articles. The search bar and the table follow the portal's ledger
   (.acct-searchbar, .acct-table) so the two read as one product; they are
   restated here because the public pages do not load portal.css. */
/* Positioned so it paints over the tail of the backdrop above it, which
   fades to the solid page colour and would otherwise cover the heading. */
.insights-older{position:relative;max-width:760px;margin:40px auto 0}
.insights-older h2{font-size:19px;font-weight:800;letter-spacing:-0.2px;margin:0 0 14px}
.insights-searchbar{position:relative;display:flex;align-items:center;margin-bottom:14px}
.insights-searchbar .ic{position:absolute;left:14px;z-index:1;color:var(--muted-2);pointer-events:none}
.insights-searchbar input{
  width:100%;padding:11px 38px 11px 40px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--text);font:inherit;font-size:14.5px;outline:none;
}
.insights-searchbar input:focus{border-color:var(--line-hover)}
.insights-searchbar input::placeholder{color:var(--muted-2)}
.insights-clear{position:absolute;right:8px;width:26px;height:26px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.insights-clear:hover{background:var(--panel-2);color:var(--text)}
.insights-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
/* Fixed layout, so the clipped description takes what the two narrow columns
   leave instead of pushing the table wider than its box. */
.insights-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.insights-table th:first-child{width:150px}
.insights-table th:last-child{width:170px}
.insights-table th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2);padding:12px 16px;border-bottom:1px solid var(--line)}
.insights-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.insights-table tbody tr:last-child td{border-bottom:none}
.insights-table tbody tr:hover{background:var(--panel-2)}
.insights-table a{color:var(--text);font-weight:700;text-decoration:none}
.insights-table a:hover{color:var(--brand)}
.insights-date,.insights-for{color:var(--muted);font-size:13px}
/* One line, clipped: the detail belongs on the article, not in the row. */
.insights-desc{display:block;margin-top:3px;color:var(--muted);font-size:13px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.insights-empty{margin:0;padding:22px 16px;text-align:center;color:var(--muted);font-size:14px}
.insights-table mark.sq{background:var(--mark-bg);color:var(--mark-ink);border-radius:3px;padding:0 1px}

/* 68 characters or so to the line: the page is 1040px wide and prose set to
   that width is unreadable. */
.article{max-width:720px;margin:0 auto}
.article-back{display:block;width:fit-content;margin-bottom:22px;font-size:13.5px;font-weight:700;color:var(--brand);text-decoration:none}
.article-back:hover{text-decoration:underline}
.article .tag-sm{display:inline-block}
.article h1{font-size:36px;font-weight:800;letter-spacing:-0.8px;line-height:1.18;margin:6px 0 12px}
.article-meta{font-size:13px;color:var(--muted-2);margin:0 0 20px}
.article-pdf{display:inline-block;margin-left:2px;padding:3px 11px;border:1px solid var(--line);border-radius:999px;color:var(--brand);font-weight:700;text-decoration:none;white-space:nowrap}
.article-pdf:hover{border-color:var(--line-hover)}
.article-lede{font-size:18.5px;line-height:1.6;color:var(--muted);margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid var(--line)}

.article-body{font-size:16.5px;line-height:1.72;color:var(--text)}
.article-body p{margin:0 0 18px}
.article-body h2{font-size:24px;font-weight:800;letter-spacing:-0.4px;line-height:1.3;margin:40px 0 14px}
.article-body h3{font-size:18.5px;font-weight:700;margin:28px 0 10px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:24px}
.article-body li{margin-bottom:9px}
.article-body a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article-body code{font-size:.9em;padding:1px 5px;border-radius:5px;background:var(--panel-2)}
.article-body blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--brand);background:var(--panel-2);border-radius:0 12px 12px 0}
.article-body blockquote p{margin:0;font-size:15px;color:var(--muted)}

/* The table scrolls inside its own box so a wide one never pushes the page
   sideways on a phone. */
.article-table{margin:0 0 22px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.article-table table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55}
.article-table th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2);padding:12px 14px;border-bottom:1px solid var(--line)}
.article-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.article-table tbody tr:last-child td{border-bottom:none}
.article-table td:first-child{white-space:nowrap;font-weight:700}

@media (max-width:640px){
  .insights-title{font-size:27px}
  .article h1{font-size:28px}
  .article-lede{font-size:17px}
  .article-body{font-size:16px}
  .article-body h2{font-size:21px}
  .insight-card{padding:20px}
  .insights-for,.insights-table th:last-child{display:none}
  .insights-table th:first-child{width:104px}
  .insights-table th,.insights-table td{padding-left:12px;padding-right:12px}
}