/* ============================================================================
   AI with Michelle — the earnings call map (/earnings-call-map/)
   A newspaper markets page inside the site's header and footer: newsprint white,
   black ink, one ink-blue for links, Scotch Roman headline, Franklin agate rows.
   Loaded on this page only. Every value comes from a token on .ecm.
   tokens · fonts · sheet · head · figures · controls · table · legend · notes ·
   browser surfaces · responsive · print
   ========================================================================== */


/* --- Fonts (SIL OFL, self-hosted) ----------------------------------------- */

@font-face{font-family:"Old Standard TT";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/old-standard-tt-normal-400.woff2) format("woff2")}
@font-face{font-family:"Old Standard TT";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/old-standard-tt-normal-700.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/libre-franklin-normal-400-800.woff2) format("woff2")}


/* --- Tokens --------------------------------------------------------------- */

.ecm{
  --ecm-paper:#ffffff;
  --ecm-ink:#121212;
  --ecm-ink-2:#2f2f2f;
  --ecm-muted:#5d5d5d;
  --ecm-hair:#d7d7d4;
  --ecm-hair-strong:#a9a9a5;
  --ecm-row-hover:#f4f4f1;
  --ecm-link:#1b558f;
  --ecm-link-rule:#9fb6cf;
  --ecm-select:#dbe6f2;

  --ecm-serif:"Old Standard TT","Iowan Old Style",Georgia,"Times New Roman",serif;
  --ecm-sans:"Libre Franklin","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;

  --ecm-gap:clamp(24px,4vw,48px);
}


/* --- Sheet ---------------------------------------------------------------- */

.ecm{background:var(--ecm-paper);color:var(--ecm-ink);border-top:1px solid var(--ecm-ink);font:16px/1.55 var(--ecm-sans);font-variant-numeric:tabular-nums lining-nums}
.ecm-sheet{width:min(var(--max),calc(100% - 2*var(--gutter)));margin-inline:auto;padding:clamp(20px,3vw,32px) 0 clamp(48px,7vw,88px)}
.ecm h1,.ecm h2{font-family:var(--ecm-serif);font-weight:700;color:var(--ecm-ink);letter-spacing:-.005em;text-wrap:balance}
.ecm p{margin:0 0 14px}
.ecm a{color:var(--ecm-link);text-decoration-color:var(--ecm-link-rule);text-underline-offset:.2em}
.ecm a:hover{text-decoration-color:currentColor}
.ecm .icon-inline{width:.72em;height:.72em;stroke-width:2.2;margin-left:.12em}


/* --- Head ----------------------------------------------------------------- */

.ecm-head{border-top:4px double var(--ecm-ink);padding-top:clamp(16px,2.4vw,24px);margin-bottom:clamp(20px,2.6vw,26px)}
.ecm-head h1{font-size:clamp(2.35rem,6.2vw,4.4rem);line-height:1.02;margin:0 0 12px;max-width:16ch}
.ecm-dek{font-family:var(--ecm-serif);font-size:clamp(1.12rem,2.1vw,1.42rem);line-height:1.38;color:var(--ecm-ink-2);max-width:46ch}
.ecm-head .ecm-dateline{margin:0;font-size:.8rem;letter-spacing:.02em;color:var(--ecm-muted)}
.ecm-dateline time{color:var(--ecm-ink);font-weight:600}


/* --- Figures box and explainer -------------------------------------------- */

.ecm-top{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-bottom:clamp(22px,3vw,28px)}
.ecm-figures{margin:0;border-top:2px solid var(--ecm-ink);border-bottom:1px solid var(--ecm-ink)}
.ecm-fig{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--ecm-hair)}
.ecm-fig:last-child{border-bottom:0}
.ecm-fig dt{order:0;flex:none;font-size:.92rem;color:var(--ecm-ink-2)}
.ecm-fig::after{content:"";order:1;flex:1 1 auto;min-width:16px;border-bottom:1px dotted var(--ecm-hair-strong);transform:translateY(-.32em)}
.ecm-fig dd{order:2;flex:none;margin:0;font-weight:700;font-size:1.06rem;white-space:nowrap}
.ecm-intro{font-family:var(--ecm-serif);font-size:1.08rem;line-height:1.6;color:var(--ecm-ink-2);max-width:62ch}
.ecm-intro p:last-child{margin-bottom:0}


/* --- Table section and controls ------------------------------------------- */

.ecm-table-section{border-top:2px solid var(--ecm-ink);padding-top:14px}
.ecm-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-bottom:10px}
.ecm-controls h2{font-size:1.6rem;line-height:1.1;margin:0 auto 2px 0}
.ecm-filters{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.ecm-filters[hidden]{display:none}
.ecm-field{display:grid;gap:4px;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ecm-muted)}
.ecm-field input,.ecm-field select{font:500 .95rem/1.2 var(--ecm-sans);letter-spacing:0;text-transform:none;color:var(--ecm-ink);background:var(--ecm-paper);border:1px solid var(--ecm-ink);border-radius:0;padding:8px 10px;min-height:40px}
.ecm-search input{width:min(260px,70vw)}
.ecm-field select{appearance:none;-webkit-appearance:none;padding-right:30px;background:var(--ecm-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23121212' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center/11px}
.ecm-field input::placeholder{color:var(--ecm-muted)}
.ecm-count{flex-basis:100%;margin:0;font-size:.82rem;color:var(--ecm-muted)}
.ecm-count b{color:var(--ecm-ink)}


/* --- The table: agate rows ------------------------------------------------ */

.ecm-table-wrap{border-top:1px solid var(--ecm-ink)}
.ecm-table{width:100%;border-collapse:collapse;font-size:.86rem;line-height:1.3}
.ecm-table thead th{position:sticky;top:var(--header-h);z-index:1;background:var(--ecm-paper);text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ecm-ink);padding:9px 10px 7px;border-bottom:2px solid var(--ecm-ink);white-space:nowrap}
.ecm-table tbody tr{border-bottom:1px solid var(--ecm-hair)}
.ecm-table tbody tr:hover{background:var(--ecm-row-hover)}
.ecm-table tbody th,.ecm-table td{padding:6px 10px;vertical-align:baseline;text-align:left;font-weight:400}
.ecm-table .ecm-date,.ecm-table thead th:nth-child(3){text-align:right}
.ecm-unconfirmed{color:var(--ecm-muted)}
.ecm-table th:first-child,.ecm-table td:first-child{padding-left:0}
.ecm-name{font-weight:700;color:var(--ecm-ink)}
.ecm-tick{font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--ecm-muted)}
.ecm-sector{color:var(--ecm-ink-2)}
.ecm-date{white-space:nowrap}
.ecm-kind{white-space:nowrap}
.ecm-mark{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-.04em;color:var(--ecm-ink)}
.ecm-links a{display:inline-block;margin-right:14px;white-space:nowrap;font-weight:600}
.ecm-links a:last-child{margin-right:0}
.ecm-links .ecm-quiet{font-weight:400;color:var(--ecm-ink-2);text-decoration-color:var(--ecm-hair-strong)}
.ecm-none{color:var(--ecm-muted)}
.ecm-table tr[hidden]{display:none}
.ecm-empty{margin:0;padding:22px 0;border-bottom:1px solid var(--ecm-hair);font-family:var(--ecm-serif);font-size:1.05rem;color:var(--ecm-ink-2)}
.ecm-empty[hidden]{display:none}


/* --- Legend --------------------------------------------------------------- */

.ecm-legend{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--ecm-ink);display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.8rem;color:var(--ecm-ink-2)}
.ecm-legend li{display:flex;align-items:baseline}
.ecm-legend b{font-weight:700;color:var(--ecm-ink)}


/* --- Method and notes ----------------------------------------------------- */

.ecm-notes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ecm-gap);margin-top:clamp(40px,6vw,64px);border-top:4px double var(--ecm-ink);padding-top:20px}
.ecm-notes h2{font-size:1.3rem;line-height:1.2;margin:0 0 10px}
.ecm-notes p{font-family:var(--ecm-serif);font-size:1rem;line-height:1.62;color:var(--ecm-ink-2);max-width:62ch}
.ecm-download{font-family:var(--ecm-sans);font-size:.92rem;font-weight:600}


/* --- Browser surfaces ----------------------------------------------------- */

.ecm ::selection{background:var(--ecm-select);color:var(--ecm-ink)}
.ecm :focus-visible{outline:2px solid var(--ecm-link);outline-offset:2px;border-radius:0}
.ecm input{caret-color:var(--ecm-link)}
.ecm-field input:focus-visible,.ecm-field select:focus-visible{outline-offset:0}


/* --- Responsive ----------------------------------------------------------- */

@media (min-width:820px){
  .ecm-head h1{max-width:none}
  .ecm-top{grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:var(--ecm-gap);align-items:start}
  .ecm-intro{border-left:1px solid var(--ecm-hair);padding-left:clamp(24px,4vw,48px)}
  .ecm-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ecm-notes>div+div{border-left:1px solid var(--ecm-hair);padding-left:clamp(24px,4vw,48px)}
  .ecm-count{flex-basis:auto;margin-left:auto}
}

/* Phones: each row restacks into a short listing, the header row stays for assistive tech. */
@media (max-width:719px){
  .ecm-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ecm-table thead tr,.ecm-table thead th{display:block;position:static}
  .ecm-table,.ecm-table tbody{display:block}
  .ecm-table tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 8px;padding:9px 0 6px}
  .ecm-table tbody th,.ecm-table td{padding:0}
  .ecm-co{grid-column:1/-1}
  .ecm-kind{grid-column:1;grid-row:2;font-size:.8rem}
  .ecm-sector{grid-column:2;grid-row:2;font-size:.8rem;color:var(--ecm-muted)}
  .ecm-sector::before{content:"· "}
  .ecm-date{grid-column:3;grid-row:2;font-size:.8rem;color:var(--ecm-muted)}
  .ecm-links{grid-column:1/-1;grid-row:3}
  .ecm-links a{padding:8px 0;margin-right:18px}
  .ecm-search input{width:100%}
  .ecm-filters,.ecm-search{width:100%}
  .ecm-filters .ecm-field:not(.ecm-search){flex:1 1 140px}
  .ecm-field select{width:100%}
}


/* --- Print ---------------------------------------------------------------- */

@media print{
  .ecm-filters,.ecm-count{display:none}
  .ecm-table thead tr,.ecm-table thead th{display:block;position:static}
  .ecm a{color:var(--ecm-ink)}
}


/* --- Linked rows (/earnings-call-map/#co-MSFT) ---------------------------- */

.ecm-table tbody tr{scroll-margin-top:calc(var(--header-h) + 48px)}
.ecm-table tbody tr:target{background:var(--ecm-select)}
.ecm-notes h2+p{margin-top:0}
.ecm-notes p+h2{margin-top:22px}
