/* ==========================================================================
   Clean Corner Leads

   Dark navy chrome, light workspace, one green that comes from the
   website's own palette. Mobile first — this gets used standing in a
   doorway far more often than sitting at a desk.
   ========================================================================== */

:root {
    /* Green, taken from the site and deepened so it holds white text. */
    --brand-50:  #E7F8ED;
    --brand-100: #C6EFD4;
    --brand-400: #42C652;
    --brand-500: #22B24C;
    --brand-600: #159B3E;
    --brand-700: #0E7C31;

    /* Navy, from the site footer. The chrome is built from this. */
    --navy-900: #080D1A;
    --navy-800: #0E152B;
    --navy-700: #17203C;
    --navy-600: #222E50;

    --ink:       #0F1729;
    --ink-soft:  #55627A;
    --ink-faint: #8592A8;

    --bg:        #EFF3F8;
    --surface:   #FFFFFF;
    --surface-2: #F6F9FC;
    --line:      #E2E8F1;
    --line-soft: #EDF1F7;

    /* Chart and status accents. */
    --teal:   #0EA5A5;
    --blue:   #3B7DF6;
    --violet: #7C5CF0;
    --amber:  #E8890C;
    --rose:   #E5484D;

    --warn:     #A45B06;
    --warn-bg:  #FEF5E6;
    --error:    #C0332C;
    --error-bg: #FEF1F0;
    --ok:       #0E7C31;
    --ok-bg:    #E7F8ED;

    --r-sm: 10px;
    --r:    14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 41, .05), 0 1px 3px rgba(15, 23, 41, .04);
    --shadow-md: 0 2px 4px rgba(15, 23, 41, .04), 0 8px 20px -6px rgba(15, 23, 41, .10);
    --shadow-lg: 0 24px 48px -16px rgba(15, 23, 41, .22), 0 2px 6px rgba(15, 23, 41, .05);

    --tabbar-h: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:       #EAEFF8;
        --ink-soft:  #A0ACC2;
        --ink-faint: #74819A;

        --bg:        #070B15;
        --surface:   #111A2C;
        --surface-2: #162035;
        --line:      #24314C;
        --line-soft: #1C2740;

        --brand-50:  #0D2C1A;
        --brand-100: #133F24;

        --warn-bg:  #2A1F0B;
        --error-bg: #2C1413;
        --ok-bg:    #0D2C1A;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .5);
        --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .6);
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; line-height: 1.22; letter-spacing: -.021em; }
h1 { font-size: 23px; font-weight: 760; }
h2 { font-size: 14px; font-weight: 680; letter-spacing: -.008em; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-600); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--brand-500); }

/* Figures line up in columns when the digits are all one width. */
.tile-n, .stat-n, .bar-value, .donut-value, .log-when, .lead-when {
    font-variant-numeric: tabular-nums;
}

.muted { color: var(--ink-soft); }
.small { font-size: 13px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.shell { min-height: 100dvh; }

.main {
    padding: 18px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
    max-width: 100%;
}

.sidebar { display: none; }

/* The bottom bar carries the same navy as the desktop sidebar, so the
   app looks like one thing whichever way you come at it. */
.tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    background: var(--navy-800);
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-bottom: env(safe-area-inset-bottom);
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: var(--tabbar-h);
    padding: 9px 4px;
    color: #7E8CA8;
    font-size: 10.5px;
    font-weight: 620;
    letter-spacing: .01em;
    text-decoration: none;
    position: relative;
}

.tab svg {
    width: 21px; height: 21px;
    fill: none; stroke: currentColor;
    stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round;
}

.tab.is-active { color: #fff; }
.tab.is-active svg { stroke: var(--brand-400); }

/* A short bar above the active tab, tucked under the top border. */
.tab.is-active::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--brand-400);
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }

.brand-mark {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--brand-400), var(--brand-600));
    box-shadow: 0 4px 12px -2px rgba(34, 178, 76, .45);
    color: #fff;
    font-weight: 820;
    font-size: 14px;
    letter-spacing: .01em;
}

.brand-text strong { display: block; font-size: 15px; font-weight: 720; letter-spacing: -.015em; }
.brand-text small  { display: block; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }

.brand--gate { justify-content: center; margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   Page heading
   -------------------------------------------------------------------------- */

.page-head { margin: 2px 0 20px; }
.page-head h1 { margin-bottom: 3px; }
.page-head .muted { font-size: 14px; }

.back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    padding: 5px 11px 5px 8px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 620;
    text-decoration: none;
}
.back:hover { color: var(--brand-600); border-color: var(--brand-100); }

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 18px;
}

.tile {
    position: relative;
    display: block;
    padding: 15px 15px 13px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    overflow: hidden;
}

a.tile:hover { border-color: var(--brand-100); box-shadow: var(--shadow-md); }

/* The one tile that is a call to action gets the navy treatment. */
.tile--accent {
    background: linear-gradient(150deg, var(--navy-800), var(--navy-700) 60%, #1B3A2A);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 28px -12px rgba(14, 21, 43, .55);
}
.tile--accent .tile-n small { font-size: 15px; font-weight: 640; letter-spacing: 0; margin-left: 1px; color: var(--ink-faint); }

.tile-l { color: #A9B7CE; }
.tile--accent .tile-n { color: #fff; }

.tile-n {
    display: block;
    font-size: 28px;
    font-weight: 780;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.tile-n small { font-size: 15px; font-weight: 640; letter-spacing: 0; margin-left: 1px; color: var(--ink-faint); }

.tile-l {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 640;
    letter-spacing: .015em;
    color: var(--ink-soft);
}

.tile-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--ink-soft);
}
.tile-delta.is-up   { background: var(--ok-bg);    color: var(--ok); }
.tile-delta.is-down { background: var(--error-bg); color: var(--error); }
.tile--accent .tile-delta { background: rgba(255, 255, 255, .12); color: #D8E2F0; }

.spark { display: block; width: 100%; height: 30px; margin-top: 8px; overflow: visible; }
.spark-line { fill: none; stroke: var(--brand-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tile--accent .spark-line { stroke: var(--brand-400); }

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    margin-bottom: 14px;
    min-width: 0;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-head h2 { color: var(--ink); }
.panel-sub--foot { margin: 14px 0 0; text-align: center; }
.panel-sub { margin: -6px 0 12px; font-size: 12.5px; color: var(--ink-faint); }

.empty { color: var(--ink-soft); font-size: 14px; padding: 8px 0; }
.empty--big {
    padding: 44px 20px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--r-xl);
    color: var(--ink-soft);
}

.grid { display: grid; gap: 14px; }

/* --------------------------------------------------------------------------
   Charts
   -------------------------------------------------------------------------- */

.chart { position: relative; }

.chart-svg {
    display: block;
    width: 100%;
    height: 168px;
    overflow: visible;
}

/* Stroke widths are held steady while the viewBox is stretched to fit. */
.chart-line {
    fill: none;
    stroke: var(--brand-500);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.chart-grid {
    stroke: var(--line-soft);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.chart-grad-top    { stop-color: var(--brand-400); stop-opacity: .30; }
.chart-grad-bottom { stop-color: var(--brand-400); stop-opacity: .02; }

.chart-dot      { fill: var(--brand-600); stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-dot-halo { fill: var(--brand-400); opacity: .22; }

.chart-x {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-faint);
}

.chart-peak {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-faint);
}

/* --- donut --- */

.donut { position: relative; width: 168px; max-width: 100%; margin: 4px auto 0; }
.donut svg { display: block; width: 100%; transform: rotate(-90deg); }

.donut-track,
.donut-slice,
.donut-empty {
    fill: none;
    stroke-width: 4.2;
}

.donut-track { stroke: var(--line-soft); }
.donut-empty { stroke: var(--line); }

.donut-slice { stroke-linecap: butt; }
.donut-slice--won   { stroke: var(--brand-500); }
.donut-slice--lost  { stroke: var(--rose); }
.donut-slice--open  { stroke: var(--blue); }

.donut-hole {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.donut-value { font-size: 30px; font-weight: 790; letter-spacing: -.04em; line-height: 1; }
.donut-label { margin-top: 3px; font-size: 11px; font-weight: 620; color: var(--ink-faint); }

.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend .k-won   { background: var(--brand-500); }
.legend .k-lost  { background: var(--rose); }
.legend .k-open  { background: var(--blue); }

/* --- bars --- */

.bars { display: grid; gap: 11px; }

.bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
}

.bar-label {
    grid-column: 1;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bar-value { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--ink-soft); }

.bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}

.bar-fill { display: block; height: 100%; border-radius: var(--r-pill); }
.bar-fill--brand  { background: linear-gradient(90deg, var(--brand-500), var(--brand-400)); }
.bar-fill--teal   { background: linear-gradient(90deg, #0B8B8B, var(--teal)); }
.bar-fill--blue   { background: linear-gradient(90deg, #2B62D0, var(--blue)); }
.bar-fill--violet { background: linear-gradient(90deg, #6242D6, var(--violet)); }
.bar-fill--amber  { background: linear-gradient(90deg, #C97407, var(--amber)); }

/* Bar widths as classes, because the content security policy allows no
   inline styles and a nonce does not cover a style attribute. */
.w-0{width:0}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}
.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}
.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}
.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}
.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}
.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}
.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}
.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}
.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}
.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}
.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}
.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}
.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}
.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}
.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}
.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}
.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}

/* --------------------------------------------------------------------------
   Lead list
   -------------------------------------------------------------------------- */

.lead-list { list-style: none; margin: 0; padding: 0; }

.lead-list--card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.lead-row + .lead-row { border-top: 1px solid var(--line-soft); }

.lead-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 4px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.lead-list--card .lead-link { padding: 14px 15px; }
.lead-link:hover  { background: var(--surface-2); }
.lead-link:active { background: var(--line-soft); }

.avatar {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--brand-50), var(--brand-100));
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .01em;
}

.lead-main { flex: 1; min-width: 0; }
.lead-top  { display: flex; align-items: center; gap: 8px; min-width: 0; }

.lead-name {
    font-size: 14.5px;
    font-weight: 680;
    letter-spacing: -.012em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lead-sub {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lead-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); }
.flag { color: var(--warn); font-weight: 660; }

.lead-when { flex: none; font-size: 11.5px; font-weight: 560; color: var(--ink-faint); padding-top: 3px; }

/* --------------------------------------------------------------------------
   Pills and chips
   -------------------------------------------------------------------------- */

.pill {
    display: inline-block;
    flex: none;
    padding: 2.5px 9px;
    border-radius: var(--r-pill);
    font-size: 10.5px;
    font-weight: 720;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--ink-soft);
}

.pill--new       { background: var(--brand-50); color: var(--brand-700); }
.pill--contacted { background: #E7EFFE; color: #23509E; }
.pill--quoted    { background: #FDF0DC; color: #8C5504; }
.pill--won       { background: var(--brand-500); color: #fff; }
.pill--lost      { background: var(--error-bg); color: var(--error); }

@media (prefers-color-scheme: dark) {
    .pill--contacted { background: #17264A; color: #8FB4FF; }
    .pill--quoted    { background: #33260C; color: #F1B45E; }
}

.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 640;
    text-decoration: none;
    white-space: nowrap;
}

.chip span { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }
.chip:hover { border-color: var(--brand-100); color: var(--brand-700); }

.chip.is-on {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(14, 21, 43, .5);
}
.chip.is-on span { color: var(--brand-400); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.stack { display: grid; gap: 13px; }
.stack--form { max-width: 430px; }

.field { display: grid; gap: 6px; min-width: 0; }
.field > span { font-size: 12.5px; font-weight: 660; color: var(--ink-soft); letter-spacing: .005em; }
.field small { font-size: 12px; color: var(--ink-faint); line-height: 1.5; }

input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], select, textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    /* 16px keeps iOS Safari from zooming the page on focus. */
    font: inherit;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

input::placeholder, textarea::placeholder { color: var(--ink-faint); }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355627A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 12px;
    padding-right: 36px;
}

textarea { resize: vertical; min-height: 82px; line-height: 1.55; }

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(34, 178, 76, .16);
}

.code-input {
    text-align: center;
    font-size: 30px !important;
    font-weight: 740;
    letter-spacing: .34em;
    text-indent: .34em;
    padding: 15px 12px;
}

.searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.searchbar input { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 44px: the smallest target a thumb hits reliably. */
    min-height: 44px;
    padding: 11px 17px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: 14px;
    font-weight: 660;
    letter-spacing: -.005em;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(160deg, var(--brand-500), var(--brand-600));
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(21, 155, 62, .5);
}
.btn-primary:hover { background: linear-gradient(160deg, var(--brand-400), var(--brand-500)); color: #fff; }

.btn-quiet { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-quiet:hover { border-color: var(--brand-500); color: var(--brand-700); background: var(--surface); }

.btn-link { background: none; border: none; color: var(--brand-600); min-height: 38px; padding: 5px; font-weight: 640; }

.btn-danger { color: var(--error); border-color: rgba(192, 51, 44, .3); background: var(--surface); }
.btn-danger:hover { background: var(--error-bg); border-color: var(--error); color: var(--error); }

.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 7px 12px; font-size: 13px; }

.btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.alert {
    padding: 12px 14px;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-weight: 540;
    margin-bottom: 14px;
    border: 1px solid transparent;
    border-left-width: 3px;
}

.alert--error { background: var(--error-bg); color: var(--error); border-left-color: var(--error); }
.alert--warn  { background: var(--warn-bg);  color: var(--warn);  border-left-color: var(--warn); }
.alert--ok    { background: var(--ok-bg);    color: var(--ok);    border-left-color: var(--ok); }
.alert--info  { background: var(--brand-50); color: var(--brand-700); border-left-color: var(--brand-500); }

/* --------------------------------------------------------------------------
   Lead detail
   -------------------------------------------------------------------------- */

.split { display: grid; gap: 0; }

.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-actions .btn { flex: 1 1 auto; min-width: 0; }

.quote {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 14px 15px;
    background: var(--surface-2);
    border-left: 3px solid var(--brand-400);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 14px;
    line-height: 1.62;
}

.details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 9px 14px; margin: 0; font-size: 14px; }
.details dt { color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.details dd { margin: 0; overflow-wrap: anywhere; font-weight: 560; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 7px; }

.status-btn {
    min-height: 42px;
    padding: 9px 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: 13px;
    font-weight: 660;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease;
}
.status-btn:hover { border-color: var(--brand-500); color: var(--brand-700); }

.status-btn.is-on {
    background: linear-gradient(160deg, var(--brand-500), var(--brand-600));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(21, 155, 62, .5);
}

.notes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.notes li { padding: 12px 13px; background: var(--surface-2); border-radius: var(--r-sm); }
.notes p { margin: 0 0 5px; font-size: 14px; overflow-wrap: anywhere; }
.notes small { color: var(--ink-faint); font-size: 11.5px; font-weight: 560; }

/* --------------------------------------------------------------------------
   Team, devices, log
   -------------------------------------------------------------------------- */

.people, .devices, .log, .plain { list-style: none; margin: 0; padding: 0; }

.people li { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.people li + li { border-top: 1px solid var(--line-soft); }
.people-main { flex: 1; min-width: 0; }
.people-main strong { display: block; font-size: 14px; font-weight: 660; }
.people-main small { display: block; color: var(--ink-faint); font-size: 12px; overflow-wrap: anywhere; }
.people li.is-off { opacity: .48; }

.devices li { padding: 11px 0; }
.devices li + li { border-top: 1px solid var(--line-soft); }
.devices strong { display: block; font-size: 14px; font-weight: 640; }
.devices small { color: var(--ink-faint); font-size: 12px; }

.log li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 11px 0; }
.log li + li { border-top: 1px solid var(--line-soft); }
.log-what strong { display: block; font-size: 13.5px; font-weight: 620; }
.log-what small { display: block; color: var(--ink-faint); font-size: 11.5px; overflow-wrap: anywhere; }
.log-who { grid-column: 1; font-size: 11.5px; color: var(--ink-soft); }
.log-when { grid-column: 2; grid-row: 1 / span 2; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.log li.is-warn .log-what strong { color: var(--warn); }

.plain li { padding: 7px 0 7px 19px; position: relative; font-size: 13.5px; color: var(--ink-soft); }
.plain li::before {
    content: "";
    position: absolute; left: 2px; top: 14px;
    width: 6px; height: 6px;
    border-radius: 2px;
    background: var(--brand-400);
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 10px; font-size: 13px; }

/* --------------------------------------------------------------------------
   Signed-out pages
   -------------------------------------------------------------------------- */

body.bare {
    background:
        radial-gradient(1100px 520px at 50% -12%, rgba(34, 178, 76, .16), transparent 62%),
        var(--bg);
}

.gate {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
    max-width: 428px;
    margin: 0 auto;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 26px 22px;
}

.card--gate h1 { margin-bottom: 7px; font-size: 25px; }
.card--gate .muted { font-size: 14px; margin-bottom: 20px; }
.card--gate .stack { margin-top: 4px; }

.resend { text-align: center; margin-top: 12px; }

.signature { margin: 0; font-size: 11.5px; color: var(--ink-faint); }
.signature a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }
.signature a:hover { color: var(--brand-500); }
.signature--gate { text-align: center; margin-top: 22px; }

/* --------------------------------------------------------------------------
   Desktop
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
    .shell {
        display: grid;
        grid-template-columns: 244px minmax(0, 1fr);
        /* The sidebar is sticky and only one viewport tall. Without this the
           page background showed through the column below it on a long page.
           navy-900 is where the sidebar's own gradient ends, so there is no
           seam at the fold. */
        background: linear-gradient(90deg, var(--navy-900) 0 244px, transparent 244px);
    }

    .tabbar { display: none; }

    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: sticky;
        top: 0;
        height: 100dvh;
        padding: 22px 14px;
        background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
        border-right: 1px solid rgba(255, 255, 255, .06);
    }

    .sidebar .brand-text strong { color: #fff; }
    .sidebar .brand-text small  { color: #7E8CA8; }

    .nav { display: grid; gap: 3px; }

    .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 12px;
        border-radius: var(--r-sm);
        color: #9AA8C0;
        font-size: 14px;
        font-weight: 620;
        text-decoration: none;
        transition: background .12s ease, color .12s ease;
    }

    .nav-link svg {
        width: 19px; height: 19px;
        fill: none; stroke: currentColor;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
        flex: none;
    }

    .nav-link:hover { background: rgba(255, 255, 255, .06); color: #E4EAF4; }

    .nav-link.is-active {
        background: linear-gradient(90deg, rgba(66, 198, 82, .18), rgba(66, 198, 82, .04));
        color: #fff;
    }
    .nav-link.is-active svg { stroke: var(--brand-400); }

    .nav-link.is-active::before {
        content: "";
        position: absolute;
        left: 0; top: 9px; bottom: 9px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--brand-400);
    }

    .sidebar-foot { margin-top: auto; display: grid; gap: 13px; }

    .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .who .avatar { background: rgba(66, 198, 82, .16); color: var(--brand-400); }
    .who-text { min-width: 0; }
    .who-text strong { display: block; font-size: 13px; font-weight: 660; color: #EDF1F8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .who-text small  { display: block; font-size: 11px; color: #7E8CA8; text-transform: capitalize; }

    .sidebar .btn-quiet {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .12);
        color: #DDE4EF;
    }
    .sidebar .btn-quiet:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .22); }

    .sidebar .signature { color: #66738C; }
    .sidebar .signature a { color: #66738C; }
    .sidebar .signature a:hover { color: var(--brand-400); }

    .main { padding: 30px 34px 48px; max-width: 1180px; }

    h1 { font-size: 28px; }
    .page-head { margin-bottom: 24px; }

    .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .tile { padding: 17px 17px 15px; }
    .tile-n { font-size: 32px; }

    .panel { padding: 20px; margin-bottom: 16px; }

    .chart-svg { height: 210px; }

    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

    .split { grid-template-columns: minmax(0, 1fr) 312px; gap: 16px; align-items: start; }
    .split-side { position: sticky; top: 30px; }

    .contact-actions .btn { flex: 0 0 auto; }
}

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