/* Lemur operator dashboard — LIGHT "Linear / Apple" skin (MAX-171).
   One stylesheet: self-hosted @font-face block first, then the light design
   tokens + component idiom (see the big banner comment below). Edit the token
   block to restyle the brand. (Was the dark Chinchilla skin pre-MAX-171; the
   light system replaced the styling half in place.) */

/* Self-hosted woff2 subsets. Only JetBrains Mono (mono) is still referenced by
   the light skin — the Instrument Serif / Space Grotesk faces are inert leftovers
   from the dark port (a face is only fetched when a rule names its family). */

/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/488071a2-7d14-4ae3-a902-aa0593b1ced5.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/9fa9e4f8-37fd-458b-82b0-b424ca81649f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/43b3364f-946d-4347-9bc2-82f74737ab9f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/9b0e4972-1b7f-402d-b2b2-06ed14d8cbd2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/de34e59e-6858-4bea-8c88-8e8b93b1a6b6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/ad2f57c1-7ce0-4918-88d6-76f4200d2c1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/8fd1ad68-049b-4558-a366-d831fd67ac7f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/59e09dc6-7a44-442a-9905-fbf82813636b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/6dd102b4-beee-4b24-bff6-5cb353835a3b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/8cb8319e-2622-4c12-a508-14bcbdebfe50.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/de34e59e-6858-4bea-8c88-8e8b93b1a6b6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ad2f57c1-7ce0-4918-88d6-76f4200d2c1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/8fd1ad68-049b-4558-a366-d831fd67ac7f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/59e09dc6-7a44-442a-9905-fbf82813636b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/6dd102b4-beee-4b24-bff6-5cb353835a3b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/8cb8319e-2622-4c12-a508-14bcbdebfe50.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/de34e59e-6858-4bea-8c88-8e8b93b1a6b6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ad2f57c1-7ce0-4918-88d6-76f4200d2c1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/8fd1ad68-049b-4558-a366-d831fd67ac7f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/59e09dc6-7a44-442a-9905-fbf82813636b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/6dd102b4-beee-4b24-bff6-5cb353835a3b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/8cb8319e-2622-4c12-a508-14bcbdebfe50.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/de34e59e-6858-4bea-8c88-8e8b93b1a6b6.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ad2f57c1-7ce0-4918-88d6-76f4200d2c1d.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/8fd1ad68-049b-4558-a366-d831fd67ac7f.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/59e09dc6-7a44-442a-9905-fbf82813636b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/6dd102b4-beee-4b24-bff6-5cb353835a3b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/8cb8319e-2622-4c12-a508-14bcbdebfe50.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/9bc396c1-adbe-4f81-8580-4a978f371efe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/2694de0f-b311-4225-91b1-1a4f45710f6d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bac97336-aac4-46a7-a01c-df205e4fda60.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/9bc396c1-adbe-4f81-8580-4a978f371efe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/2694de0f-b311-4225-91b1-1a4f45710f6d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bac97336-aac4-46a7-a01c-df205e4fda60.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/9bc396c1-adbe-4f81-8580-4a978f371efe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/2694de0f-b311-4225-91b1-1a4f45710f6d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bac97336-aac4-46a7-a01c-df205e4fda60.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/9bc396c1-adbe-4f81-8580-4a978f371efe.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/2694de0f-b311-4225-91b1-1a4f45710f6d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bac97336-aac4-46a7-a01c-df205e4fda60.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===================================================================
   Lemur operator dashboard — LIGHT skin (Linear / Apple direction).
   Near-white surfaces, dark-slate text, one calm indigo accent, hairline
   borders, soft shadows, system/Inter-style sans. The @font-face block
   above keeps JetBrains Mono available for IDs / numbers / the email
   preview; the display + body voice is the system sans.
   Restyle the brand by editing the token block below. (MAX-171)
   =================================================================== */

:root{
  /* Surfaces — near-white, breathable */
  --bg:#FAFAFB;          /* app canvas */
  --bg-2:#FFFFFF;        /* sidebar / topbar / table head lift */
  --panel:#FFFFFF;       /* cards */
  --panel-2:#F6F7F9;     /* hover / subtle fill */
  --panel-3:#EEF0F4;     /* pressed / nested fill */
  --line:#E8EAED;        /* hairline border */
  --line-2:#E1E4E8;
  --line-hi:#D6D9DE;     /* control borders */

  /* Text — dark slate ladder */
  --ink:#1D1D1F;         /* headings / primary */
  --ink-2:#41464D;       /* body / secondary */
  --ink-3:#6B7280;       /* muted labels */
  --ink-4:#9AA0A8;       /* faint / meta */

  /* Accent — one calm indigo, used sparingly */
  --accent:#5B63D3;
  --accent-hover:#4A52C4;
  --accent-soft:#EFF0FC;
  --accent-border:#CDD0F2;

  /* Back-compat aliases: the dashboard markup still references --teal for
     "the accent". Point them all at the single indigo so the one accent
     flows through every existing rule and inline style. */
  --teal:var(--accent);
  --teal-dim:var(--accent);
  --teal-glow:var(--accent-soft);

  /* Semantic — calm, low-chroma */
  --amber:#B26B00;
  --amber-dim:#E4CBA1;
  --amber-glow:#FBF3E7;
  --amber-ink:#7A5200;
  --red:#C0392B;
  --red-soft:#FBEEEC;
  --red-border:#E8B7B0;

  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif:var(--sans);

  --radius:10px;
  --radius-sm:7px;
  --shadow-sm:0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.05);
  --shadow-md:0 1px 2px rgba(17,24,39,.04), 0 6px 16px rgba(17,24,39,.06);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

/* ====== SIDEBAR ====== */
.sidebar{
  background:var(--bg-2);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sb-brand{padding:24px 22px 20px;border-bottom:1px solid var(--line)}
.sb-brand-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sb-logo{
  width:30px;height:30px;border-radius:8px;background:var(--accent);
  position:relative;box-shadow:var(--shadow-sm);flex-shrink:0;
}
.sb-logo::after{
  content:"";position:absolute;inset:9px;border-radius:50%;background:#fff;opacity:.95;
}
/* Branding: the real logo <img> fits the same 30px slot — contain (no crop), no
   placeholder fill behind a transparent PNG. (<img> renders no ::after dot.) */
img.sb-logo{background:transparent;object-fit:contain;box-shadow:none}
.sb-code{
  font-family:var(--mono);font-size:10px;color:var(--ink-4);
  letter-spacing:.16em;text-transform:uppercase;
}
.sb-title{
  font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:4px 0 8px;
}
.sb-desc{font-size:12px;color:var(--ink-3);line-height:1.55}

.sb-section-label{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  font-weight:600;padding:22px 22px 8px;display:flex;justify-content:space-between;
}
.sb-nav{padding:4px 12px 24px}
.sb-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:8px;margin-bottom:2px;cursor:default;
  transition:background .12s;
}
.sb-item a{
  color:var(--ink-2);text-decoration:none;font-weight:500;letter-spacing:-.01em;
  flex:1;font-size:13.5px;
}
.sb-item:hover{background:var(--panel-2)}
.sb-item:hover a{color:var(--ink)}
.sb-item.active{background:var(--accent-soft)}
.sb-item.active a{color:var(--accent)}
.sb-item-dot{width:6px;height:6px;border-radius:50%;background:transparent;flex-shrink:0}
.sb-item.active .sb-item-dot{background:var(--accent)}

/* ====== MAIN / TOPBAR ====== */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 28px;border-bottom:1px solid var(--line);
  background:rgba(250,250,251,.82);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  position:sticky;top:0;z-index:10;
}
.tb-left{display:flex;align-items:center;gap:24px}
.tb-system{font-size:12px;color:var(--ink-3);letter-spacing:-.01em}
.tb-system b{color:var(--ink);font-weight:600}
.tb-right{display:flex;gap:8px;align-items:center}

.tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line-hi);
  color:var(--ink-3);background:var(--panel);
}
.tag.live{
  color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft);
  padding-left:20px;position:relative;
}
.tag.live::before{
  content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* MAX-226: attention center — topbar bell + read-only dropdown panel. */
.attn{position:relative}
.attn-bell{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;border:1px solid var(--line-hi);
  background:var(--panel);font-size:13px;user-select:none;
}
.attn-bell::-webkit-details-marker{display:none}
.attn-bell-icon{font-size:14px;line-height:1}
.attn-badge{
  font-family:var(--mono);font-size:10px;font-weight:600;line-height:1;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
}
.attn[open] .attn-bell{border-color:var(--accent-border);background:var(--accent-soft)}
.attn-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:30;
  width:320px;max-height:60vh;overflow-y:auto;
  background:var(--bg-2);border:1px solid var(--line-hi);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,22,28,.16);padding:8px;
}
.attn-head{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding:6px 8px 8px;
}
.attn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.attn-item a{
  display:flex;gap:8px;align-items:flex-start;padding:8px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:13px;line-height:1.35;
}
.attn-item a:hover{background:var(--accent-soft)}
.attn-icon{flex:0 0 auto;font-size:14px;line-height:1.3}
.attn-text{flex:1 1 auto}
.attn-empty{padding:10px 8px 12px;color:var(--ink-4);font-size:13px}

/* MAX-220: drafts-to-approve inbox cards. */
.draft-card .draft-subject{margin-top:8px;font-size:13px;color:var(--ink-2)}
.draft-card .draft-subject .k{font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  margin-right:6px}
.draft-card .draft-body{margin:8px 0 0;padding:10px 12px;border-radius:8px;
  background:var(--panel);border:1px solid var(--line);
  font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;max-height:280px;overflow-y:auto}
.draft-card .draft-copy{flex:0 0 auto;align-self:flex-start}

.content{padding:28px 28px 64px;max-width:1440px;width:100%}

/* ====== PAGE HEAD ====== */
.page-head{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
  padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:24px;
}
.eyebrow{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:12px;display:flex;gap:10px;align-items:center;
}
.eyebrow .div{width:18px;height:1px;background:var(--accent-border)}
.page-title{
  font-family:var(--sans);font-weight:600;font-style:normal;
  font-size:34px;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:0;
}
.page-sub{font-size:13px;color:var(--ink-3);margin-top:10px;max-width:640px;line-height:1.6}
.page-clock{text-align:right}
.clock-meta{
  font-family:var(--mono);font-size:10px;color:var(--ink-4);
  letter-spacing:.08em;text-transform:uppercase;
}

/* ====== KPI CARDS (quiet) ====== */
.kpi-strip{display:grid;gap:12px;margin-bottom:24px}
.kpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm);
}
.kpi-tick{display:none}
.kpi-label{
  font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:8px;
}
.kpi-val{
  font-size:30px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums;
}
.kpi-val.teal{color:var(--accent)}
.kpi-val.amber{color:var(--amber)}
.kpi-val.dim{color:var(--ink-4)}

/* ====== PANELS / CARDS ====== */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);margin-bottom:20px;overflow:hidden;
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.panel-head-left{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.panel-code{font-family:var(--mono);font-size:10px;color:var(--ink-4);letter-spacing:.1em}
.panel-title{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.panel-sub{font-size:11.5px;color:var(--ink-3)}
.panel-head-right{display:flex;gap:8px;align-items:center}
.panel-body{padding:20px}
.panel-body > h2:first-child{margin-top:0}

/* MAX-182 — no horizontal scroll anywhere. The wide /master + /calls views are
   card layouts (see "LEAD CARDS" below); the remaining tables fit the panel
   fluidly via fixed layout, so a column shrinks and text wraps instead of
   forcing an overflow-x scrollbar at any width. */
.panel.table-wrap{overflow:hidden}
.panel.table-wrap table{width:100%}
/* Headers keep whole words (so each column gets a sensible width floor — no
   "PRIORI TY"), while cell data may break anywhere so a long email/URL or a
   tight column always reflows to fit instead of forcing a scrollbar at narrow
   widths. The header floors keep short cell words (e.g. "CONFIRM") intact. */
.panel.table-wrap th{white-space:normal;overflow-wrap:normal}
.panel.table-wrap td{white-space:normal;overflow-wrap:anywhere}

/* ====== TABLES (roomy, light row separation) ====== */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{
  text-align:left;font-size:11px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap;
}
thead th.right{text-align:right}
tbody td{
  padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:top;line-height:1.5;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--panel-2)}
td.right{text-align:right;font-variant-numeric:tabular-nums}
td.mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
td.strong{color:var(--ink);font-weight:600}
td.teal{color:var(--accent)}
td.amber{color:var(--amber)}
td.action{color:var(--accent);font-family:var(--mono);font-size:12px;cursor:pointer}
td.action:hover{text-decoration:underline}
td a{color:var(--accent)}
td a:hover{text-decoration:underline}
td small{color:var(--ink-4);font-size:11.5px}

/* booked confirm rows in the Needs-Max queue get a quiet accent edge */
tr.call.booked td:first-child{box-shadow:inset 3px 0 var(--accent)}

/* ====== MASTER "next email preview" — rendered inside the per-lead card's
   <details> drawer now (MAX-182), so it gets full card width to read
   naturally instead of a wide column blowing out the table. ====== */
.preview pre{
  background:var(--panel);max-width:none;width:100%;margin:0;
  white-space:pre-wrap;word-break:break-word;line-height:1.6;
}

/* ====== LEAD CARDS (MAX-182) — /master + /calls reflow one card per lead
   instead of a 12+ column table. Cards are block-level, so they wrap to the
   viewport at any width with no horizontal scroll; secondary fields tuck into
   a native <details> drawer (no JS). ====== */
.lead-cards{display:flex;flex-direction:column;gap:0}
.lead-card{
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.lead-card:last-child{border-bottom:none}
.lead-card:hover{background:var(--panel-2)}
/* MAX-203 #5: the keyboard-focused / current card in the log+next flow. */
.lead-card:focus{outline:none}
.lead-card.is-current{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--accent)}
.lead-top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.lead-check{flex:0 0 auto;padding-top:2px}
.lead-rank{
  flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--ink-3);
  min-width:54px;
}
.lead-rank b{color:var(--ink);font-size:13px}
.lead-id{flex:1 1 200px;min-width:0}
.lead-name{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.lead-sub{font-size:11.5px;color:var(--ink-4);margin-top:2px}
/* MAX-203: lead-with-the-signal engagement badges on the call card. Opened is
   soft (neutral), clicked stronger (accent), warm hottest (amber) — the warm
   one is the clicked-not-booked dealer to call first. */
.eng-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:5px 0}
.eng-badge{display:inline-block;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;
  border-radius:999px;background:var(--panel-2);color:var(--ink-2);
  border:1px solid var(--line)}
.eng-badge--click{background:var(--accent-soft);color:var(--accent);
  border-color:var(--accent-border)}
.eng-badge--warm{background:var(--amber-glow);color:var(--amber-ink);
  border-color:var(--amber-dim)}
/* MAX-203: daily progress counter in the call-sheet panel head. */
.calls-progress{font-size:12px;font-weight:600;color:var(--ink-2);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.calls-progress-count{white-space:nowrap}
/* MAX-230: daily-goal progress bar (goal = the SDR's call capacity). */
.goal{display:flex;align-items:center;gap:8px}
.goal-track{width:120px;height:6px;border-radius:999px;background:var(--line-2);
  overflow:hidden}
.goal-fill{height:100%;border-radius:999px;background:var(--accent);
  transition:width .4s ease}
.goal-label{font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-3);white-space:nowrap}
.goal.goal-reached .goal-fill{background:var(--teal,#0E8C7D)}
.goal.goal-reached .goal-label{color:var(--teal,#0E8C7D)}
/* MAX-230: one-time booking celebration banner — a calm pop+fade, no looping. */
.celebrate-banner{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  padding:12px 16px;border-radius:12px;border:1px solid var(--accent-border);
  background:var(--accent-soft);color:var(--ink);font-weight:600;
  animation:celebrate-pop .5s ease-out both}
.celebrate-emoji{font-size:20px;line-height:1;
  display:inline-block;animation:celebrate-bounce .9s ease-out 1}
/* MAX-230: the lemur jumps for joy — ONE-SHOT, no looping. */
.celebrate-lemur{display:inline-block;width:36px;height:36px;
  transform-origin:50% 90%;animation:lemur-jump 1s ease-out 1}
@keyframes lemur-jump{
  0%{transform:translateY(0) scale(.7) rotate(-6deg);opacity:0}
  25%{transform:translateY(-12px) scale(1.05) rotate(4deg);opacity:1}
  45%{transform:translateY(0) scale(1)}
  60%{transform:translateY(-6px)}
  78%{transform:translateY(0)}
  100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes celebrate-pop{
  0%{opacity:0;transform:translateY(-6px) scale(.98)}
  60%{opacity:1;transform:translateY(0) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes celebrate-bounce{
  0%{transform:scale(.6) rotate(-8deg)}
  40%{transform:scale(1.25) rotate(6deg)}
  100%{transform:scale(1) rotate(0)}}
/* MAX-230 upgrade: a few lemurs climb up from the bottom of the screen, converge
   near the banner, do an arms-up jump/dance, then fade — ONE-SHOT, no looping.
   The fixed overlay is pointer-events:none so it never blocks the UI. */
.lemur-climb{position:fixed;inset:0;z-index:50;display:flex;
  justify-content:center;align-items:flex-start;gap:40px;pointer-events:none}
.lemur-climber{width:64px;height:64px;transform:translateY(110vh);opacity:0;
  transform-origin:50% 90%;animation:lemur-climb 2.4s ease-out 1 both}
.lemur-climber:nth-child(2){animation-delay:.18s}
.lemur-climber:nth-child(3){animation-delay:.36s}
@keyframes lemur-climb{
  0%{transform:translateY(110vh) scale(.9) rotate(-4deg);opacity:0}
  12%{opacity:1}
  55%{transform:translateY(14vh) scale(1) rotate(2deg);opacity:1}
  66%{transform:translateY(6vh) scale(1.12) rotate(0)}
  76%{transform:translateY(14vh) scale(1)}
  86%{transform:translateY(11vh) scale(1.06)}
  100%{transform:translateY(14vh) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .celebrate-banner,.celebrate-emoji,.celebrate-lemur{animation:none}
  .lemur-climb{display:none}
  .goal-fill{transition:none}}

/* MAX-233: mis-click undo strip + confirmation. */
.undo-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 12px;padding:10px 14px;border-radius:10px;
  border:1px solid var(--line-hi);background:var(--bg-2);font-size:13px}
.undo-strip form{margin:0}
.undo-btn{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;padding:6px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--accent-border);background:var(--accent-soft);
  color:var(--accent)}
.undo-btn:hover{background:var(--accent);color:#fff}
.undo-done{margin:0 0 12px;padding:10px 14px;border-radius:10px;font-size:13px;
  border:1px solid var(--line-hi);background:var(--panel);color:var(--ink-2)}
/* MAX-215: copy-paste call list — a skinny box to the RIGHT of the ranked
   queue. Flex row that WRAPS below on narrow screens (no horizontal scroll;
   MAX-182 rule holds). */
.calls-layout{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.calls-layout .calls-queue{flex:1 1 520px;min-width:0}
.calls-layout .calls-copybox{flex:0 1 280px;min-width:220px}
.calls-layout .calls-calendar{flex:0 1 340px;min-width:280px}  /* MAX-231 inline Calendly */
.copybox-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px 4px}
.copybox-actions .copybox-btn{flex:1 1 120px}
.copybox-list{list-style:decimal;margin:6px 0 4px;padding:0 14px 10px 2.2em;
  font-size:12.5px}
.copybox-list li{padding:5px 0;border-bottom:1px solid var(--line)}
.copybox-list li:last-child{border-bottom:0}
.copybox-list .cb-biz{display:block;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere}
.copybox-list .cb-meta{display:block;color:var(--ink-3);font-size:11.5px;
  overflow-wrap:anywhere}
.copybox-btn.copied{border-color:var(--accent);color:var(--accent)}
/* MAX-214: production-vs-test view toggle on /metrics, /pipeline, the close-rate
   scaffold. A quiet line; the link flips ?test=1. */
.view-toggle{font-size:12px;color:var(--ink-3);margin:0 0 12px}
.view-toggle b{color:var(--ink-2);font-weight:600}
.view-toggle a{margin-left:2px}
.lead-badges{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-left:auto;justify-content:flex-end;
}
.badge{
  display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.02em;padding:3px 8px;border-radius:999px;
  border:1px solid var(--line-hi);color:var(--ink-3);background:var(--panel);
  white-space:nowrap;
}
.badge.accent{color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft)}
.badge.amber{color:var(--amber-ink);border-color:var(--amber-dim);background:var(--amber-glow)}
.badge.red{color:var(--red);border-color:var(--red-border);background:var(--red-soft)}
.lead-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:6px 20px;margin-top:12px;
}
.lead-facts > div{font-size:12.5px;color:var(--ink-2);line-height:1.5;min-width:0}
.lead-facts .k,.lead-detail .k{
  display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);font-weight:600;margin-bottom:1px;
}
.lead-more{margin-top:12px}
.lead-more > summary{
  font-size:11.5px;color:var(--accent);cursor:pointer;list-style:none;
  font-weight:500;width:max-content;
}
.lead-more > summary::-webkit-details-marker{display:none}
.lead-more > summary::before{content:"▸ ";color:var(--ink-4)}
.lead-more[open] > summary::before{content:"▾ "}
.lead-detail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px 20px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.lead-detail > div{min-width:0;font-size:12.5px;color:var(--ink-2)}
.lead-detail .preview-block{grid-column:1/-1}
/* MAX-213: consistent empty-state look across lists (.lead-empty) and panels
   (.chart-empty) — same muted ink + italic, padding scaled to context. */
.lead-empty{padding:20px;color:var(--ink-3);font-size:13px;font-style:italic}
.panel-head-right .select-all{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);
}

/* Calls disposition form inside a card: stacked, fluid, never forces width. */
form.disp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
form.disp select,form.disp input,form.disp textarea{width:100%;min-width:0}
/* MAX-194: every control sits inside a labelled field; the label text stacks
   above its control. .full spans the row (the call note). The [hidden] rule
   must out-specify the flex above so a conditional field that's hidden is
   actually gone, not re-shown by display:flex. */
form.disp label.disp-field{display:flex;flex-direction:column;gap:4px;min-width:0}
form.disp label.disp-field>span{font-size:11px;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em}
/* MAX-194 polish: grid cells stretch to the tallest in their row, so push each
   control to the cell BOTTOM — then a two-line label ("Next follow-up date
   (overrides default)") no longer drops its input below the single-line-label
   inputs beside it. Robust to any label wrap (1, 2, or 3 lines). */
form.disp label.disp-field>select,
form.disp label.disp-field>input,
form.disp label.disp-field>textarea{margin-top:auto}
form.disp label.disp-field.full{grid-column:1/-1}
form.disp label.disp-field[hidden]{display:none}
form.disp button{grid-column:1/-1;justify-self:start;width:max-content}
/* MAX-240: group subheading inside the discovery form (full-row divider). */
form.disp .disp-group{grid-column:1/-1;margin:14px 0 0;padding-top:10px;
  border-top:1px solid var(--line);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
form.disp .disp-group:first-child{margin-top:0;padding-top:0;border-top:0}

/* MAX-222: "Book this dealer" live-booking CTA on the call card. */
.lead-book{margin:4px 0 10px}
.book-cta{
  appearance:none;cursor:pointer;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:var(--radius-sm);
  color:#fff;background:var(--accent);border:1px solid var(--accent);
}
.book-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* ====== PREVIEW / CODE BLOCKS (import + master summaries) ====== */
pre{
  font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:8px 0;
}
code{
  font-family:var(--mono);font-size:12px;background:var(--panel-3);
  padding:1px 6px;border-radius:5px;color:var(--ink);
}

/* ====== FORMS / INPUTS / BUTTONS ====== */
input,select,textarea{
  font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--panel);
  border:1px solid var(--line-hi);border-radius:var(--radius-sm);padding:8px 10px;
}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{font-family:var(--sans);line-height:1.5;resize:vertical}
label{font-family:var(--sans);font-size:12px;color:var(--ink-3)}

select{
  appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236B7280' stroke-width='1.5'><path d='M3 4.5 6 7.5 9 4.5'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
}

/* Checkboxes / radios stay native (with indigo accent) — covers the
   bulk-cancel select-all + per-row checkboxes on /master. */
input[type="checkbox"],input[type="radio"]{
  appearance:auto;-webkit-appearance:auto;width:auto;height:auto;
  padding:0;border:0;background:none;box-shadow:none;border-radius:0;
  accent-color:var(--accent);vertical-align:middle;cursor:pointer;
}
input[type="file"]{padding:6px 8px;font-size:12px;color:var(--ink-2)}

button{
  font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink);
  background:var(--panel);border:1px solid var(--line-hi);border-radius:var(--radius-sm);
  padding:8px 12px;cursor:pointer;letter-spacing:0;text-transform:none;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
button:hover{background:var(--panel-2);border-color:var(--ink-4)}
button:active{transform:translateY(.5px)}
button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}

/* Filter bar (call sheet) — wraps instead of overflowing at narrow widths. */
form.filter-bar{display:flex;gap:10px;align-items:center;margin:0 0 4px;flex-wrap:wrap}
form.filter-bar label{display:flex;align-items:center;gap:6px}
form.filter-bar input{min-width:0;flex:1 1 160px}
/* MAX-196: the export link sits in the filter bar and reads like the button. */
form.filter-bar a.btn-secondary{font-family:var(--sans);font-size:12.5px;
  font-weight:500;color:var(--ink);background:var(--panel);
  border:1px solid var(--line-hi);border-radius:var(--radius-sm);
  padding:8px 12px;text-decoration:none;white-space:nowrap}
form.filter-bar a.btn-secondary:hover{background:var(--panel-2);
  border-color:var(--ink-4)}

/* In-cell action forms: stacked + fluid. No fixed min-width that could force a
   horizontal scrollbar (MAX-182). */
td form{display:flex;flex-direction:column;gap:6px;min-width:0}
td form.inline-actions{flex-direction:row;flex-wrap:wrap;gap:6px;min-width:0}
td form.inline-actions button{flex:0 0 auto}
table select{width:100%;min-width:0}
table input,table select,table textarea{max-width:100%;min-width:0}

/* Campaigns board: the actions cell stacks small inline forms. */
.campaigns-board td form{display:inline-block;min-width:0;margin:0 4px 4px 0}
.campaigns-board td form button{display:inline-block;margin:0 2px 2px 0}

/* Campaign editor: full-width step inputs. */
.content table input[name^=subject],.content table textarea{width:100%}

/* ====== BANNERS / ALERTS / WARNINGS ====== */
.banner{
  font-size:12.5px;font-weight:500;padding:12px 16px;margin:0 0 20px;
  border:1px solid var(--line-hi);border-radius:var(--radius-sm);
  background:var(--panel);color:var(--ink-2);box-shadow:var(--shadow-sm);
}
.banner.paused{color:var(--red);border-color:var(--red-border);background:var(--red-soft)}

.alert{
  font-size:12.5px;padding:10px 14px;margin:0 0 12px;border-radius:var(--radius-sm);
  border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--ink-2);
}
.alert.needs_review,.alert.stale{
  border-color:var(--amber-dim);background:var(--amber-glow);color:var(--amber-ink);
}
.alert code{background:rgba(0,0,0,.05)}

.warn{
  font-size:12.5px;color:var(--amber-ink);border:1px solid var(--amber-dim);
  background:var(--amber-glow);padding:10px 14px;margin:0 0 10px;border-radius:var(--radius-sm);
}

/* ====== CONTENT TYPOGRAPHY ====== */
.content h2{
  font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:32px 0 8px;
}
.content h2:first-child{margin-top:0}
.content h2 small{font-weight:400;font-size:12px;color:var(--ink-4);letter-spacing:0}
.content p{color:var(--ink-3);font-size:13px;line-height:1.6;margin:8px 0}
.content p small,small{color:var(--ink-4);font-size:11.5px}
.content a{color:var(--accent)}
ul{margin:8px 0;padding-left:20px}
li{color:var(--ink-2);margin:4px 0;line-height:1.55}

/* ====== METRICS (MAX-167) — KPI cards reuse .kpi; charts are inline SVG that
   scale to the panel so the screen fits the viewport (no horizontal scroll). */
.chart-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;
}
.chart-grid svg{display:block;max-width:100%}
.chart-bar{fill:var(--accent)}
.chart-bar.zero{fill:var(--panel-3)}
.chart-label{font-family:var(--mono);font-size:10px;fill:var(--ink-3)}
.chart-tick{font-family:var(--mono);font-size:8px;fill:var(--ink-4)}
.chart-empty{font-size:12.5px;color:var(--ink-3);padding:10px 2px;font-style:italic}
.lost-row{
  display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;
}
.lost-row:last-child{border-bottom:none}
/* MAX-213 no-scroll: let long sender emails / domains / subjects / state names
   wrap and the flex children shrink, so a row can never force a horizontal
   scrollbar at narrow widths. */
.lost-k{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.lost-v{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;
  min-width:0;overflow-wrap:anywhere;text-align:right}
/* MAX-242: the agent-written research brief — LEFT-aligned prose (NOT the
   right-aligned mono .lost-v, which read backwards / looked preformatted). The
   sanitized-markdown links from render_brief_markdown read as normal anchors. */
.brief-body{text-align:left;color:var(--ink);font-size:13px;line-height:1.55;
  overflow-wrap:anywhere;word-break:break-word;white-space:normal;max-width:100%}
.brief-body a{color:var(--teal);text-decoration:underline;overflow-wrap:anywhere}
/* MAX-248: the agent brief grouped into a few collapsible thematic ROWS; each
   row's sections render as side-by-side boxes that WRAP to a stacked column on
   narrow cards (flex-wrap + min-width:0 on the boxes + .brief-body wrapping ⇒ no
   horizontal scroll; .panel{overflow:hidden} clips as a last resort). A caret on
   the row summary flips with the open state. Only "The Play" opens by default. */
.brief-row{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.brief-row:first-child{border-top:0;margin-top:0;padding-top:0}
.brief-row > summary.brief-row-head{display:flex;justify-content:space-between;
  gap:8px;align-items:baseline;cursor:pointer;list-style:none;font-weight:600;
  font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.brief-row > summary.brief-row-head::-webkit-details-marker{display:none}
.brief-row > summary.brief-row-head::after{content:"\25B8";color:var(--ink-3);font-size:11px}
.brief-row[open] > summary.brief-row-head::after{content:"\25BE"}
.brief-row-grid{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:8px}
.brief-box{flex:1 1 240px;min-width:0}
.brief-box-head{font-weight:600;font-size:12px;color:var(--ink-3);
  margin-bottom:4px;overflow-wrap:anywhere}
.brief-box .brief-body{margin-top:0}
/* MAX-242: collapsible card panels via native <details> (no JS). The <summary>
   reuses .panel-head; a caret flips with the open state. */
details.panel > summary.panel-head{cursor:pointer;list-style:none}
details.panel > summary.panel-head::-webkit-details-marker{display:none}
details.panel > summary.panel-head::after{content:"\25B8";color:var(--ink-3);
  font-size:11px}
details.panel[open] > summary.panel-head::after{content:"\25BE"}
/* MAX-242: competitor multi-select checkboxes inside the discovery form — a
   wrap row of small labels; the checkboxes must not inherit the form's
   full-width input sizing. */
form.disp .checks{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
form.disp .checks .check{display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--ink-2)}
form.disp .checks input[type=checkbox]{width:auto;min-width:0}