/* kg-depth.css: the 3D look of every page but the Home (release 2.3.11). One physical model, drawn with light and never
   with a transform: the room is the ground, a plate floats over it, a tile stands on a plate, a well is cut into one.
   Nothing here moves or tilts a figure: no transform, perspective, rotate or filter touches a surface that holds text,
   so a number renders in exactly the pixels of a flat page. kg-room.js draws the land in the room; this sheet alone is
   the whole look where WebGL is not there (the phone app, reduced data).

   Loaded last, after the generated kg-halo-shapes.css, so every rule carries :is(html.tc-app, html.kg-halo). */

/* --d-* tokens: the light theme here, the dark values twice below as the Halo blocks do. Literal colours (Android WebView). */
:root {
  --d-room-top: #F3F5F8;
  --d-room-bottom: #ECEFF4;
  --d-plate: #FFFFFF;
  --d-plate-top: #FFFFFF;
  --d-plate-low: #F7F8FA;
  --d-tile: #FFFFFF;
  --d-tile-low: #F3F5F8;
  --d-well: #EEF0F4;
  --d-rim: rgba(255,255,255,.95);
  --d-rim-low: rgba(16,24,40,.08);
  --d-line: rgba(16,24,40,.09);
  --d-slat-up: rgba(255,255,255,.9);
  --d-slat-down: rgba(16,24,40,.07);
  --d-hover: rgba(3,105,161,.06);
  --d-edge: 0 1px 0 #E2E6EC, 0 2px 0 #D9DEE5, 0 3px 0 #CFD5DE, 0 4px 0 #C6CDD7, 0 5px 0 #BCC4CF;
  --d-edge-tile: 0 1px 0 #E4E8ED, 0 2px 0 #D9DEE5, 0 3px 0 #CDD3DC;
  --d-cast: 0 20px 32px -18px rgba(16,24,40,.34);
  --d-cast-tile: 0 4px 0 rgba(16,24,40,.06);
  --d-sink: inset 0 2px 5px rgba(16,24,40,.13), inset 0 0 0 1px rgba(16,24,40,.07), 0 1px 0 rgba(255,255,255,.9);
  --d-key: inset 0 1px 0 rgba(255,255,255,.34), 0 1px 0 #025A8A, 0 2px 0 #024E78, 0 3px 0 #024367, 0 8px 12px -6px rgba(3,105,161,.5);
  --d-key-press: inset 0 2px 3px rgba(0,0,0,.28);
  --d-row: #FFFFFF;
  --d-row-low: #F6F7F9;
  --d-row-rim: #FFFFFF;
  --d-edge-row: 0 1px 0 #E2E6EC, 0 2px 0 #D5DAE2, 0 3px 0 #C8CED8, 0 4px 0 rgba(16,24,40,.07);
  --d-up-glow: rgba(4,120,87,.22);
  --d-down-glow: rgba(200,30,58,.18);
}
:root[data-theme="dark"] {
  --d-room-top: #060A0E;
  --d-room-bottom: #010203;
  --d-plate: #10151B;
  --d-plate-top: #1A212A;
  --d-plate-low: #0E1318;
  --d-tile: #1D242D;
  --d-tile-low: #151B22;
  --d-well: #090D11;
  --d-rim: rgba(255,255,255,.2);
  --d-rim-low: rgba(255,255,255,.03);
  --d-line: rgba(255,255,255,.075);
  --d-slat-up: rgba(255,255,255,.035);
  --d-slat-down: rgba(0,0,0,.42);
  --d-hover: rgba(60,214,255,.07);
  --d-edge: 0 1px 0 #2A333E, 0 2px 0 #222A33, 0 3px 0 #1A2129, 0 4px 0 #141A20, 0 5px 0 #0E1317;
  --d-edge-tile: 0 1px 0 #2F3945, 0 2px 0 #242C35, 0 3px 0 #1A2028;
  --d-cast: 0 26px 44px -24px rgba(60,214,255,.2), 0 14px 22px -10px rgba(0,0,0,.8);
  --d-cast-tile: 0 4px 0 rgba(0,0,0,.28);
  --d-sink: inset 0 2px 7px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.045), 0 1px 0 rgba(255,255,255,.055);
  --d-key: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 #2AAFD3, 0 2px 0 #2292B1, 0 3px 0 #1A7690, 0 10px 18px -8px rgba(60,214,255,.45);
  --d-key-press: inset 0 2px 4px rgba(3,18,27,.5);
  --d-row: #1E252E;
  --d-row-low: #171D24;
  --d-row-rim: rgba(255,255,255,.13);
  --d-edge-row: 0 1px 0 #2B343F, 0 2px 0 #212932, 0 3px 0 #181E25, 0 4px 0 rgba(0,0,0,.4);
  --d-up-glow: rgba(74,222,159,.26);
  --d-down-glow: rgba(255,138,147,.24);
}
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
  --d-room-top: #060A0E;
  --d-room-bottom: #010203;
  --d-plate: #10151B;
  --d-plate-top: #1A212A;
  --d-plate-low: #0E1318;
  --d-tile: #1D242D;
  --d-tile-low: #151B22;
  --d-well: #090D11;
  --d-rim: rgba(255,255,255,.2);
  --d-rim-low: rgba(255,255,255,.03);
  --d-line: rgba(255,255,255,.075);
  --d-slat-up: rgba(255,255,255,.035);
  --d-slat-down: rgba(0,0,0,.42);
  --d-hover: rgba(60,214,255,.07);
  --d-edge: 0 1px 0 #2A333E, 0 2px 0 #222A33, 0 3px 0 #1A2129, 0 4px 0 #141A20, 0 5px 0 #0E1317;
  --d-edge-tile: 0 1px 0 #2F3945, 0 2px 0 #242C35, 0 3px 0 #1A2028;
  --d-cast: 0 26px 44px -24px rgba(60,214,255,.2), 0 14px 22px -10px rgba(0,0,0,.8);
  --d-cast-tile: 0 4px 0 rgba(0,0,0,.28);
  --d-sink: inset 0 2px 7px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.045), 0 1px 0 rgba(255,255,255,.055);
  --d-key: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 0 #2AAFD3, 0 2px 0 #2292B1, 0 3px 0 #1A7690, 0 10px 18px -8px rgba(60,214,255,.45);
  --d-key-press: inset 0 2px 4px rgba(3,18,27,.5);
  --d-row: #1E252E;
  --d-row-low: #171D24;
  --d-row-rim: rgba(255,255,255,.13);
  --d-edge-row: 0 1px 0 #2B343F, 0 2px 0 #212932, 0 3px 0 #181E25, 0 4px 0 rgba(0,0,0,.4);
  --d-up-glow: rgba(74,222,159,.26);
  --d-down-glow: rgba(255,138,147,.24);
}
}

/* ---------- the room ---------- */
html.kg-halo:not(.tc-app) { background: var(--d-room-bottom); }
/* a fixed layer, not background-attachment: fixed, which would repaint the whole window on every scroll */
html.kg-halo:not(.tc-app)::before { content: ""; position: fixed; inset: 0; z-index: -2; background: linear-gradient(180deg, var(--d-room-top), var(--d-room-bottom)); pointer-events: none; }
html.kg-halo:not(.tc-app)[data-theme] body { background: transparent; }
.kg-room { position: fixed; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.kg-room.is-on { opacity: 1; }
/* words that stand in the open room keep a soft ground of the room's own colour around every letter */
html.kg-halo:not(.tc-app) .panel :is(.page-header, .section-head, .news-disclaimer, .reel-foot, .ig-reel-rail, .row-between),
html.kg-halo:not(.tc-app) #farmRiskAccounts {
  text-shadow: 0 0 2px var(--d-room-top), 0 0 7px var(--d-room-top), 0 0 14px var(--d-room-top);
}
/* the ledger's rule under a title goes: the title stands in the room */
:is(html.tc-app, html.kg-halo) .panel .page-header { border-block-end: 0; padding-block: 8px 12px; margin-block-end: 12px; }

/* ---------- plates: the section frames of every panel ---------- */
:is(html.tc-app, html.kg-halo) .panel :is(.card, .analysis-card, .news-cal-block):not(.tn-dq, .tn-exited),
:is(html.tc-app, html.kg-halo) .panel .lrn-grid > .empty-state,
:is(html.tc-app, html.kg-halo) .panel .section-anchor > .metric-list,
:is(html.tc-app, html.kg-halo) .panel .section-rail,
:is(html.tc-app, html.kg-halo) .panel :is(.news-brief-hero, .news-acc, .news-calendar),
:is(html.tc-app, html.kg-halo) .panel > div > .empty-state,
:is(html.tc-app, html.kg-halo) .panel > .empty-state,
:is(html.tc-app, html.kg-halo) #tiles > .metric-list,
:is(html.tc-app, html.kg-halo) .acct-figures > .metric-list,
:is(html.tc-app, html.kg-halo) .pos-figures > .metric-list,
:is(html.tc-app, html.kg-halo) .analysis-figures > .metric-list,
:is(html.tc-app, html.kg-halo) .panel .kpi-grid > .kpi-card {
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--d-plate-top), var(--d-plate) 96px) padding-box,
    linear-gradient(180deg, var(--d-rim), var(--d-rim-low) 72px) border-box;
  box-shadow: var(--d-edge), var(--d-cast);
}
:is(html.tc-app, html.kg-halo) .panel :is(.card, .analysis-card, .news-cal-block):not(.tn-dq, .tn-exited) { padding-block: 20px; padding-inline: 16px; }
:is(html.tc-app, html.kg-halo) .panel .card.dense:not(.tn-dq, .tn-exited) { padding-block: 16px; padding-inline: 16px; }
:is(html.tc-app, html.kg-halo) .panel > div > .empty-state,
:is(html.tc-app, html.kg-halo) .panel > .empty-state,
:is(html.tc-app, html.kg-halo) .panel .lrn-grid > .empty-state { padding: 32px 20px; }
/* the plates stand apart: the room shows between them, and that gap is where the depth is seen */
:is(html.tc-app, html.kg-halo) .panel .card + .card { margin-block-start: 28px; }
:is(html.tc-app, html.kg-halo) .panel .metal-grid > .card + .card { margin-block-start: 0; }
/* a frame inside a plate is not a second plate */
:is(html.tc-app, html.kg-halo) .panel :is(.card, .analysis-card) :is(.card, .analysis-card) {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0;
}
@media (max-width: 720px) {
  :is(html.tc-app, html.kg-halo) .panel :is(.card, .analysis-card, .news-cal-block):not(.tn-dq, .tn-exited) { padding-block: 16px; padding-inline: 12px; border-radius: 16px; }
  :is(html.tc-app, html.kg-halo) .panel .card + .card { margin-block-start: 22px; }
}

/* ---------- tiles: a figure that stands on a plate ---------- */
:is(html.tc-app, html.kg-halo) .panel :is(.kpi, .perf-tile, .al-card, .ch-stat, .price-cell, .score-card, .pair, .broker, .mt5-card, .policy-box, .alert-item, .ds-row, .ad-admin-row, .idea-card, .lrn-card, .tc-cal-panel, .notice, .countdown-cell, .publish-box, .policy-row, .vis-list, .construction, .news-source-notice, .field-toggle) {
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(180deg, var(--d-tile), var(--d-tile-low)) padding-box,
    linear-gradient(180deg, var(--d-rim), var(--d-rim-low) 48px) border-box;
  box-shadow: var(--d-edge-tile), var(--d-cast-tile);
}
/* a notice keeps the colour that says what kind it is */
:is(html.tc-app, html.kg-halo) .panel .notice.notice-warn { background: linear-gradient(180deg, var(--saffron-soft), var(--d-tile-low)) padding-box, linear-gradient(180deg, var(--d-rim), var(--d-rim-low) 48px) border-box; }
/* a list inside a tile is the tile's own */
:is(html.tc-app, html.kg-halo) .panel .tc-cal-panel .metric-list,
:is(html.tc-app, html.kg-halo) .panel .analysis-card .metric-list,
:is(html.tc-app, html.kg-halo) .panel .card .metric-list { background: transparent; border-color: transparent; box-shadow: none; }

/* ---------- wells: what is cut into a plate ---------- */
:is(html.tc-app, html.kg-halo) .panel :is(.chart-wrap, .chart-tv-window, .chart-funding, .chart-frame-inner) {
  border-color: transparent;
  border-radius: 14px;
  background: var(--d-well);
  box-shadow: var(--d-sink);
}
:is(html.tc-app, html.kg-halo) .panel :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) { box-shadow: var(--d-sink); border-color: transparent; }

/* ---------- tables: every row is a bar of its own, standing on the plate. The cells keep their text, their columns and
   their alignment; a row catches the light on its top edge and shows its thickness under it. The head is the tray's lip.
   A hovered row brightens where it stands: nothing moves under the eye. ---------- */
@media (min-width: 361px) {
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) {
    border-collapse: separate;
    border-spacing: 0 7px;
  }
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) th {
    background: var(--d-plate); /* opaque: a head that sticks has the rows sliding under it */
    border-block-end-color: transparent;
    box-shadow: inset 0 -1px 0 var(--d-line);
  }
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) tbody td {
    background: linear-gradient(180deg, var(--d-row), var(--d-row-low));
    border-block: 0;
    box-shadow: inset 0 1px 0 var(--d-row-rim), var(--d-edge-row);
  }
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) tbody tr > td:first-child {
    border-start-start-radius: 12px;
    border-end-start-radius: 12px;
  }
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) tbody tr > td:last-child {
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
  }
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) tbody tr:hover td {
    background: linear-gradient(180deg, var(--d-row-hover), var(--d-row));
    box-shadow: inset 0 1px 0 var(--d-rim), var(--d-edge-row);
  }
  /* a row the page has flagged keeps its own ground */
  :is(html.tc-app, html.kg-halo) .panel .data-table tbody tr.row-flagged td { background: var(--loss-soft); }
}
@media (min-width: 721px) {
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) tbody tr > td:first-child { padding-inline-start: 14px; }
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table):not(.news-fund-table) tbody tr > td:last-child { padding-inline-end: 14px; }
}
/* on a phone a table has no width to give: it reaches through the plate's padding and keeps every column it had */
@media (max-width: 720px) {
  :is(html.tc-app, html.kg-halo) .panel :is(.card, .analysis-card) .table-scroll { margin-inline: -12px; inline-size: auto; max-inline-size: none; }
}
/* the pinned first column of a wide table on a phone: the bar's end stays opaque, its head takes the plate's ground */
@media (min-width: 361px) and (max-width: 720px) {
  :is(html.tc-app, html.kg-halo) .panel .data-table.has-sticky-start tr > td:first-child { background: var(--d-row); border-inline-end: 0; box-shadow: inset 0 1px 0 var(--d-row-rim), var(--d-edge-row); }
  :is(html.tc-app, html.kg-halo) .panel .data-table.has-sticky-start tr > th:first-child { background: var(--d-plate); border-inline-end: 0; }
}
/* at 360 and under a table is stacked: each row is one slip already, and it stands up the same way */
@media (max-width: 360px) {
  :is(html.tc-app, html.kg-halo) .panel .data-table.is-stack tr {
    border: 1px solid transparent;
    border-radius: 14px;
    background:
      linear-gradient(180deg, var(--d-row), var(--d-row-low)) padding-box,
      linear-gradient(180deg, var(--d-rim), var(--d-rim-low) 48px) border-box;
    box-shadow: var(--d-edge-tile), var(--d-cast-tile);
  }
}

/* ---------- the calendar: a good day stands up, a bad day is pressed in ---------- */
:is(html.tc-app, html.kg-halo) .panel .tc-cal-day { border-color: transparent; border-radius: 10px; background: var(--d-tile-low); box-shadow: var(--d-sink); }
:is(html.tc-app, html.kg-halo) .panel .tc-cal-day.is-void { box-shadow: none; background: transparent; }
:is(html.tc-app, html.kg-halo) .panel .tc-cal-day.is-positive {
  background: linear-gradient(180deg, var(--profit-soft), var(--d-tile-low));
  box-shadow: inset 0 1px 0 var(--d-rim), 0 1px 0 var(--d-up-glow), 0 2px 0 var(--d-up-glow), 0 3px 0 var(--d-up-glow), 0 4px 0 var(--d-up-glow), 0 12px 16px -10px var(--d-up-glow);
}
:is(html.tc-app, html.kg-halo) .panel .tc-cal-day.is-negative {
  background: var(--loss-soft);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.5), inset 0 0 0 1px var(--d-down-glow), 0 1px 0 var(--d-slat-up);
}

/* ---------- the one figure that leads a screen ---------- */
:is(html.tc-app, html.kg-halo) #panel-overview .kpi-primary {
  border: 1px solid transparent;
  border-radius: 20px;
  box-shadow: var(--d-edge), var(--d-cast), inset 0 0 90px -30px rgba(60,214,255,.28);
}

/* ---------- keys: raised until pressed ---------- */
:is(html.tc-app, html.kg-halo) .panel :is(.btn-primary, button.btn:not(.btn-secondary, .btn-ghost, .btn-sm)) { box-shadow: var(--d-key); }
:is(html.tc-app, html.kg-halo) .panel :is(.btn-primary, button.btn:not(.btn-secondary, .btn-ghost, .btn-sm)):active { box-shadow: var(--d-key-press); }

/* ---------- the list of conversations is a plate of its own; an open conversation keeps its window ---------- */
html.kg-halo:not(.tc-app) #panel-communitymessages #msgRegister {
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--d-plate-top), var(--d-plate) 96px) padding-box,
    linear-gradient(180deg, var(--d-rim), var(--d-rim-low) 72px) border-box;
  box-shadow: var(--d-edge), var(--d-cast);
}

/* ---------- the shell: the rail and the bar are the room's walls, lit from the same side ---------- */
html.kg-halo:not(.tc-app) .topbar.top { box-shadow: 0 1px 0 var(--d-line), 0 18px 28px -22px rgba(0,0,0,.65); }
html.kg-halo:not(.tc-app) .sidebar { box-shadow: 0 0 34px -10px rgba(0,0,0,.7); }
html.kg-halo:not(.tc-app) #kgBar { box-shadow: 0 -1px 0 var(--d-line), 0 -18px 28px -22px rgba(0,0,0,.65); }
html.kg-halo .sidebar .tab[data-kg-rail][aria-selected="true"] .sidebar-icon { box-shadow: inset 0 1px 0 var(--d-rim), 0 1px 0 var(--d-slat-down), 0 2px 0 var(--d-slat-down); }
/* a sheet over the page is the highest plate in the room */
:is(html.tc-app, html.kg-halo) .kg-sheet { box-shadow: 0 0 0 1px var(--d-line), var(--d-cast); }
/* a track of choices is cut in, the chosen one stands in it */
:is(html.tc-app, html.kg-halo) :is(.segmented, #panel-communitymessages #msgTabs.subtabs) { box-shadow: var(--d-sink); }
:is(html.tc-app, html.kg-halo) #panel-communitymessages #msgTabs > .subtab.is-active { box-shadow: inset 0 1px 0 var(--d-rim), var(--d-edge-tile); }

/* ---------- the Community on a wide screen: posts float in the room as the Home's cards do. On a phone it stays one
   ground, edge to edge, as the feed has always been read. ---------- */
@media (min-width: 900px) {
  html.kg-halo:not(.tc-app) #panel-community { background: transparent; }
  html.kg-halo:not(.tc-app) #panel-community .community-layout { background: transparent; }
  html.kg-halo:not(.tc-app) #panel-community :is(#cmFeed, #cmPermalink, #cmSymbol) .ig-post,
  html.kg-halo:not(.tc-app) #panel-community :is(.ig-rail, #cmStories, .ig-feed-filters) {
    border: 1px solid transparent;
    border-radius: 18px;
    background:
      linear-gradient(180deg, var(--d-plate-top), var(--d-plate) 96px) padding-box,
      linear-gradient(180deg, var(--d-rim), var(--d-rim-low) 72px) border-box;
    box-shadow: var(--d-edge), var(--d-cast);
  }
  html.kg-halo:not(.tc-app) #panel-community :is(#cmFeed, #cmPermalink, #cmSymbol) .ig-post { margin-block-end: 28px; }
  html.kg-halo:not(.tc-app) #panel-community #cmStories { padding-inline: 16px; }
  html.kg-halo:not(.tc-app) #panel-community .ig-rail { padding: 16px; align-self: start; }
  html.kg-halo:not(.tc-app) #panel-community .ig-feed-filters { padding-inline: 12px; }
}

/* ---------- sign-in and the legal pages ---------- */
html.kg-halo:not(.tc-app) .auth-frame, html.kg-halo:not(.tc-app) .auth-main { background: transparent; }
html.kg-halo:not(.tc-app) .auth-main .auth-form,
html.kg-halo:not(.tc-app) main.legal.kg-page {
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--d-plate-top), var(--d-plate) 120px) padding-box,
    linear-gradient(180deg, var(--d-rim), var(--d-rim-low) 72px) border-box;
  box-shadow: var(--d-edge), var(--d-cast);
  padding: 24px;
}
@media (max-width: 720px) { html.kg-halo:not(.tc-app) .auth-main .auth-form, html.kg-halo:not(.tc-app) main.legal.kg-page { padding: 16px; } }

/* ---------- paper: a printed statement has no room and no light ---------- */
@media print {
  .kg-room { display: none; }
  html.kg-halo:not(.tc-app) { background: none; }
  :is(html.tc-app, html.kg-halo) .panel :is(.card, .analysis-card, .news-cal-block, .kpi, .kpi-card, .perf-tile, .tc-cal-panel, .notice, .metric-list),
  :is(html.tc-app, html.kg-halo) .panel :is(.data-table, .card > table, .table-scroll > table) tbody td { box-shadow: none; background: none; }
}