/* TMC Entities — the unified record.
   Prefix .en-*  (one prefix per feature; the stylesheet space is global). */

/* ---- list ---- */
.en-head, .en-row {
    display: grid;
    /* The business column had 1.6fr and swallowed every spare pixel, leaving a
       third of a wide screen empty between the name and the brands. Capped, with
       the slack moved into the brands column where logos of different widths
       actually need it. */
    grid-template-columns:
      104px                    /* TMC ID      */
      minmax(200px, 1fr)       /* business    */
      minmax(140px, 176px)     /* brands      */
      124px                    /* joined by   */
      94px                     /* last active */
      118px 110px 100px 118px; /* the money   */
    gap: .7rem; align-items: center; padding: .5rem 1rem;
}
.en-head {
    background: var(--surface-2); border: 1px solid var(--border);
    border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
    font-size: .64rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-dim);
}
.en-list {
    border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface); overflow: hidden;
}
.en-row {
    border-top: 1px solid var(--border-soft); cursor: pointer;
    transition: background .12s ease;
}
.en-row:first-child { border-top: 0; }
.en-row:hover { background: var(--surface-3); }

.en-id code {
    font-size: .68rem; background: var(--surface-2); color: var(--text-soft);
    padding: .1rem .34rem; border-radius: 4px; border: 1px solid var(--border-soft);
}
.en-name { min-width: 0; }
.en-name b {
    display: block; font-size: .85rem; font-weight: 650; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.en-name span { display: block; font-size: .72rem; color: var(--text-dim); }

.en-brands { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
/* Logos only. The brand tint stays so three logos in a row remain tellable
   apart at a glance, and the name lives on the tooltip. */
.en-brand {
    display: inline-flex; align-items: center; justify-content: center;
    height: 26px; min-width: 62px; padding: .15rem .45rem; border-radius: 5px;
    background: var(--surface-3); border: 1px solid var(--border-soft);
    overflow: hidden;
}
.en-brand .bchip { display: block; }
.en-brand .bchip img { max-height: 15px; max-width: 96px; width: auto; display: block; }
/* If a logo ever fails to load the alt text is the full company name, which is
   what was filling this column before. Keep it from doing that again. */
.en-brand .bchip img { font-size: .55rem; color: var(--text-dim); }
.en-brand.co-eff       { background: #E7F5EE; color: #05683A; border-color: #BFE3D0; }
.en-brand.co-messenger { background: #E9F0FD; color: #1B4FA8; border-color: #C6D8F5; }
.en-brand.co-thumbies  { background: #FCE9F2; color: #A3196A; border-color: #F2C6DC; }
.en-brand.co-cemsites  { background: #F1EBFD; color: #5B21B6; border-color: #DCCEF8; }

.en-val {
    text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums;
    color: var(--text-soft);
}
.en-val.total { font-weight: 700; color: var(--text); }

/* Columns drop in order of least value first: Thumbies money before Messenger
   money, detail before identity. The name, brands and total always survive. */
/* Columns drop least-valuable first. Name, brands and total always survive.
   Nine columns now, not ten — the Open count came out. */
@media (max-width: 1599.98px) {
    .en-head, .en-row {
        grid-template-columns: 100px minmax(190px,1fr) minmax(130px,170px) 116px 88px 112px 104px 112px;
    }
    .en-head > div:nth-child(8), .en-row > .en-val:nth-child(8) { display: none; }
}
@media (max-width: 1299.98px) {
    .en-head, .en-row { grid-template-columns: minmax(180px,1fr) minmax(120px,155px) 112px 110px 112px; }
    .en-head > div:nth-child(1), .en-row > .en-id,
    .en-head > div:nth-child(5), .en-row > .en-when,
    .en-head > div:nth-child(7), .en-row > .en-val:nth-child(7) { display: none; }
}
@media (max-width: 1049.98px) {
    .en-head, .en-row { grid-template-columns: minmax(160px,1fr) 135px 112px; }
    .en-head > div:nth-child(4), .en-row > .en-join,
    .en-head > div:nth-child(6), .en-row > .en-val:nth-child(6) { display: none; }
}

/* ---- the modal ---- */
.en-ttl { font-size: 1rem; display: flex; align-items: center; gap: .6rem; }
.en-ttl-id code {
    font-size: .68rem; font-weight: 500; background: var(--surface-2);
    color: var(--text-dim); padding: .12rem .38rem; border-radius: 5px;
    border: 1px solid var(--border-soft);
}

/* How the entity came to exist. Tinted by WHO joined it, because a link made
   by a machine and one made by a person carry different weight and the panel
   should not present them identically. */
.en-prov { border-bottom: 1px solid var(--border); padding: .95rem 1.2rem; }
.en-prov.human  { background: linear-gradient(180deg, #F0FAF4, var(--surface-2)); }
.en-prov.agent  { background: linear-gradient(180deg, #FFFAF0, var(--surface-2)); }
.en-prov.source { background: var(--surface-2); }

.en-prov-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.en-prov-head > .bi { font-size: 1.15rem; }
.en-prov.human  .en-prov-head > .bi { color: #1E7A45; }
.en-prov.agent  .en-prov-head > .bi { color: #B07A12; }
.en-prov.source .en-prov-head > .bi { color: var(--text-dim); }
.en-prov-head b { font-size: .92rem; font-weight: 700; color: var(--text); }
.en-prov-sub { font-size: .74rem; color: var(--text-dim); }
.en-prov-open {
    font-size: .68rem; font-weight: 700; padding: .16rem .5rem; border-radius: 20px;
    background: #EEF3FF; color: #1B4FA8; border: 1px solid #C7D8F7;
}

.en-prov-rows { display: flex; flex-wrap: wrap; gap: .45rem; }
.en-prov-row {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .32rem .55rem; background: var(--surface);
    border: 1px solid var(--border-soft); border-radius: 8px;
}
.en-prov-row .bchip img { max-height: 15px; width: auto; display: block; }
.en-prov-row.co-eff       { border-color: #BFE3D0; }
.en-prov-row.co-messenger { border-color: #C6D8F5; }
.en-prov-row.co-thumbies  { border-color: #F2C6DC; }

/* The reasoning behind an automatic link is the only record of why it happened.
   Nobody read it before the link was made, so it has to be readable now. */
.en-dec { margin-top: .7rem; display: flex; flex-direction: column; gap: .4rem; }
.en-dec-row {
    display: flex; gap: .55rem; padding: .55rem .7rem;
    background: var(--surface); border: 1px solid var(--border-soft);
    border-left: 3px solid #E0A63C; border-radius: 8px;
}
.en-dec-row.human { border-left-color: #1E7A45; }
.en-dec-row > .bi { font-size: .9rem; color: #B07A12; margin-top: .1rem; }
.en-dec-row.human > .bi { color: #1E7A45; }
.en-dec-row b {
    display: block; font-size: .76rem; font-weight: 700; color: var(--text);
    margin-bottom: .12rem;
}
.en-dec-row b span { font-weight: 500; color: var(--text-dim); margin-left: .4rem; }
.en-dec-why { font-size: .76rem; line-height: 1.5; color: var(--text-soft); }

/* One card per company. Deliberately not a single merged panel — each source
   system holds different things, and the card boundary is where that shows. */
.en-cos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0; }
.en-co { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
.en-co:last-child { border-right: 0; }
.en-co-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .9rem; background: var(--surface-2);
    border-bottom: 1px solid var(--border-soft);
}
.en-co-sys {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-dim);
}
.en-co-body { padding: .9rem; }
.en-co-name { font-size: .95rem; font-weight: 650; color: var(--text); margin-bottom: .7rem; }
.en-co-name span {
    display: block; font-size: .7rem; font-weight: 500; color: var(--text-dim);
    text-transform: none; letter-spacing: 0; margin-top: .1rem;
}

.en-figs { display: flex; gap: 1.2rem; margin-bottom: .9rem; flex-wrap: wrap; }
.en-figs > div { min-width: 0; }
.en-figs b {
    display: block; font-size: 1rem; font-weight: 700; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.en-figs span {
    display: block; font-size: .62rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-dim);
}

.en-addrs { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .8rem; }

.en-sub { border-top: 1px solid var(--border-soft); padding-top: .6rem; margin-top: .3rem; }
.en-sub > b {
    display: block; font-size: .64rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-dim); margin-bottom: .35rem;
}
.en-claim {
    display: grid; grid-template-columns: 1.4fr 1fr 82px 90px;
    gap: .4rem; align-items: center; padding: .22rem 0;
    font-size: .72rem; border-bottom: 1px dashed var(--border-soft);
}
.en-claim:last-child { border-bottom: 0; }
.en-claim span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-claim .muted { color: var(--text-dim); }
.en-claim b { text-align: right; font-variant-numeric: tabular-nums; }


/* ---- who joined it ----
   449 of the 838 entities were linked by the agent with nobody reading the
   reasoning first. That is a legitimate design decision, and it is also the
   single most important thing to be able to see down a column. */
.en-join-b {
    display: inline-flex; align-items: center; gap: .25rem; cursor: help;
    font-size: .64rem; font-weight: 700; letter-spacing: .01em;
    padding: .14rem .4rem; border-radius: 5px; white-space: nowrap;
}
.en-join-b .bi { font-size: .72rem; }
.en-join-b.human  { background: #E7F5EE; color: #05683A; border: 1px solid #BFE3D0; }
.en-join-b.agent  { background: #FFF6E5; color: #8A5A08; border: 1px solid #F0DCB4; }
.en-join-b.source { background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border-soft); }

.en-age {
    font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums;
    padding: .1rem .35rem; border-radius: 4px;
}
.en-age.fresh { background: #EDF9F1; color: #1E7A45; }
.en-age.ok    { background: var(--surface-3); color: var(--text-soft); }
.en-age.stale { background: #FDF0EF; color: #96201B; }
.en-when .muted { color: var(--text-dim); font-size: .75rem; }


/* ---- brand filter toggles ----
   A dropdown can only ask "reaching X". Toggles can ask "reaching all of X, Y
   and Z", which is the question that finds the customers already buying the
   whole portfolio. */
.en-bfilter { display: inline-flex; align-items: center; gap: .3rem; }
.en-bf {
    display: inline-flex; align-items: center; justify-content: center;
    height: 31px; padding: .2rem .5rem; border-radius: 7px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: .76rem; font-weight: 600; color: var(--text-soft);
    transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.en-bf:hover { border-color: var(--accent); background: #F4F8FF; }
.en-bf .bchip img { max-height: 14px; max-width: 84px; width: auto; display: block; }
.en-bf.on {
    border-color: var(--navy-800); background: var(--navy-800); color: #fff;
    box-shadow: 0 1px 4px rgba(16,32,64,.22);
}
/* The logos are dark artwork, so they need lifting off a navy chip. */
.en-bf.on .bchip img { filter: invert(1) brightness(1.9) contrast(.92); }
.en-bf.on.co-eff       { background: #05683A; border-color: #05683A; }
.en-bf.on.co-messenger { background: #1B4FA8; border-color: #1B4FA8; }
.en-bf.on.co-thumbies  { background: #A3196A; border-color: #A3196A; }
.en-bf.on.co-cemsites  { background: #5B21B6; border-color: #5B21B6; }
.en-bf-note {
    font-size: .7rem; font-weight: 700; color: var(--accent);
    padding-left: .2rem; white-space: nowrap;
}
.en-bf-note b { font-weight: 800; }

/* Portfolio reuses the .en-prov block to show which brands a business reaches.
   Its one extra element — the "open this under TMC Entities" line — had no rule,
   so it rendered at body size directly against the rows above it. */
.en-prov-note {
    margin-top: .55rem; font-size: .74rem; color: var(--text-dim); line-height: 1.45;
}