/* ==================== DESIGN TOKENS ====================
   Palette taken from The Messenger Co. mockups: deep navy shell, white cards
   on a cool grey canvas, one fixed colour per portfolio brand.
   Brand colours are LOCKED — they identify a company, so they must never be
   reused decoratively.
======================================================== */
:root {
    /* shell — tinted rather than white. A pure-white page with white cards
       gives nothing to separate them, so surfaces sit on a cool blue-grey
       canvas and secondary areas take a lighter tint of the same hue. */
    --navy-900: #081A35;
    --navy-800: #0B2245;
    --navy-700: #12305C;
    --canvas:    #DCE4F0;   /* page — deliberately deeper than any inset */
    --surface:   #FFFFFF;   /* cards sit above the canvas */
    --surface-2: #F2F6FD;   /* toolbars, table headers, panel heads */
    --surface-3: #EAF0FA;   /* hover, inset areas */
    --field:     #F8FBFF;   /* inputs and selects */
    --border:    #CFDBEC;
    --border-soft: #E6ECF6;

    /* text */
    --text:      #14213D;
    --text-soft: #5A6784;
    --text-dim:  #93A0B8;

    /* accents */
    --accent:  #1E6BFF;
    --m1-gold: #C0A070;   /* Messenger One mark, sampled from the lockup */
    --ok:      #00A651;
    --warn:    #E8A33D;
    --bad:     #E4322B;

    /* portfolio brands — LOCKED.
       Sampled from the official artwork in resources/. Each brand also has a
       -ui variant: the wordmark navy/green is correct for the logo itself but
       too dark for chips and ticks, which need to read at 8px against white. */
    --c-messenger:     #283050;   /* wordmark navy */
    --c-messenger-ui:  #3B6BC4;   /* lighter blue for chips, ticks, accents */
    --c-eff:           #186030;   /* forest green */
    --c-eff-ui:        #1B8A45;
    --c-thumbies:      #45566A;
    --c-thumbies-ui:   #5B7188;
    --c-cemsites:      #7AC142;
    --c-cemsites-ui:   #1B75BB;
    --c-justdigital:   #002060;
    --c-justdigital-ui:#E01020;

    --radius: 10px;
    --shadow: 0 1px 3px rgba(16,32,64,.06), 0 1px 2px rgba(16,32,64,.04);
    --shadow-lg: 0 6px 20px rgba(16,32,64,.10);
    --sidebar-w: 244px;
    --header-h: 76px;

    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
    background: var(--canvas);
    background-image:
        radial-gradient(1200px 600px at 12% -8%, rgba(30,107,255,.055), transparent 60%),
        radial-gradient(900px 500px at 105% 0%, rgba(0,166,81,.045), transparent 55%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
}

/* ==================== BRAND MARK ==================== */
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), #0B47B5);
    color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -.5px;
}
.brand-mark span { color: #7FB2FF; }

/* ==================== CARDS ==================== */
.card-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.panel-head {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--border);
}
.panel-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; flex: 0 0 22px;
    background: var(--navy-800); color: #fff; font-size: .72rem; font-weight: 700;
}
.panel-title {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text); margin: 0;
}

/* ==================== DELTAS ==================== */
.delta { font-size: .78rem; font-weight: 600; }
.delta.up   { color: var(--ok); }
.delta.down { color: var(--bad); }

/* ==================== TOASTS ==================== */
.toast-stack {
    position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 3000;
    display: flex; flex-direction: column; gap: .5rem;
}
.toast-msg {
    background: var(--navy-800); color: #fff; padding: .65rem 1rem;
    border-radius: 8px; font-size: .875rem; font-weight: 500;
    box-shadow: var(--shadow-lg); animation: toastIn .16s ease;
    display: flex; align-items: center; gap: .5rem;
}
.toast-msg.ok  { background: var(--ok); }
.toast-msg.bad { background: var(--bad); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CFD8E8; border-radius: 6px; border: 2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: #B4C1D6; }

/* ==================== BRAND CHIP ====================
   Used wherever a company is named: real logo + the brand colour, so the
   source of a record is identifiable at a glance rather than by reading. */
.bchip { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.bchip img { height: 18px; width: auto; max-width: 118px; object-fit: contain; flex: 0 0 auto; }
.bchip .bname {
    font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    white-space: nowrap;
}
.bchip.co-messenger .bname { color: var(--c-messenger-ui); }
.bchip.co-eff       .bname { color: var(--c-eff-ui); }
.bchip.sm img  { height: 14px; max-width: 92px; }
.bchip.lg img  { height: 30px; max-width: 190px; }

/* Small square marks, for dense contexts where a lockup will not fit. */
.bmark { height: 18px; width: 18px; object-fit: contain; border-radius: 4px; flex: 0 0 18px; }


/* ==================== FORM SURFACES ====================
   Bootstrap ships white inputs, which disappear against white cards. Tinting
   them gives every editable area a visible edge without adding chrome. */
.form-control, .form-select {
    background-color: var(--field);
    border-color: var(--border);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: #9DBBF5;
    box-shadow: 0 0 0 .18rem rgba(30,107,255,.13);
}
.form-control::placeholder { color: #9AA8BF; }

.btn-outline-secondary {
    background: var(--surface); border-color: var(--border); color: var(--text-soft);
}
.btn-outline-secondary:hover {
    background: var(--surface-3); border-color: #C3D0E3; color: var(--text);
}

.modal-content { border: 1px solid var(--border); border-radius: 12px; }
.modal-header, .modal-footer { background: var(--surface-2); border-color: var(--border); }


/* ==================== HINTS ==================== */
.hint {
    color: var(--text-dim); font-size: .82rem; cursor: help; margin-left: .3rem;
    vertical-align: baseline; transition: color .12s ease;
}
.hint:hover, .hint:focus { color: var(--accent); outline: none; }
/* Tooltips carry the most valuable sentences in the app — the Arbiter's actual
   reasoning about a pair. They were cramped at 340px and unformatted, so a
   three-line explanation arrived as a grey brick. Wider, with room to breathe
   and a visible hierarchy inside. */
.tooltip { --bs-tooltip-opacity: 1; }
.tooltip-inner {
    max-width: 440px; text-align: left; font-size: .78rem; line-height: 1.55;
    background: var(--navy-800); padding: .65rem .8rem; border-radius: 9px;
    box-shadow: 0 8px 24px rgba(16,32,64,.28);
    border: 1px solid rgba(255,255,255,.09);
}
.tooltip-inner b { color: #9DC2FF; font-weight: 700; }
.tooltip-inner em { color: #FFD79A; font-style: normal; font-weight: 600; }
.tooltip-inner br + b, .tooltip-inner b:first-child { display: inline-block; margin-bottom: .1rem; }
.tooltip-inner code {
    background: rgba(255,255,255,.12); color: #E8EEF9;
    padding: 0 .2rem; border-radius: 3px; font-size: .74rem;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--navy-800); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--navy-800); }

/* ==================== MODALS USE THE ROOM THEY HAVE ====================
   Bootstrap caps .modal-xl at 1140px, which on a wide monitor leaves half the
   screen empty either side while the content inside scrolls. Every dialog here
   is a comparison or a review — two records side by side, a rule against the
   rules it might contradict — so horizontal room is the whole point.
   ---------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* 95vw for EVERY dialog, not 80. Comparison modals put two full company
       records side by side with a rival strip above them, and 80vw pushed the
       second column into a scroll on exactly the screen the comparison is meant
       to be read on. en-wide used to be the single exception; there is no reason
       the others should be narrower, so the exception became the rule. */
    .modal-dialog,
    .modal-dialog.modal-sm,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.en-wide { max-width: 95vw; }

    /* Prose still needs a readable measure, so text-only bodies stay narrower
       than the dialog rather than running the full 95vw as one long line. */
    .modal-body > .ag-rev-head,
    .modal-body > .ag-rev-yours,
    .modal-body > .ag-rev-block,
    .modal-body > .ag-rev-dead,
    .modal-body > .ag-teach-note { max-width: 110ch; }
}

@media (min-width: 992px) {
    .modal-dialog-scrollable { height: calc(100% - 3rem); }
}

/* ==================== MATCH LEVEL CHIP (.tier-chip) ====================
   Shared by the review queue, the comparison modal, the unmatched page, the
   entity explorer and the decision audit, so a level looks identical wherever a
   pair is described. It replaced a bare percentage: the score is a fixed value
   per evidence combination, and rendering it as 99% invited it to be read as
   odds.

   The badge number is the level, 0 to 3 ASCENDING — 3 is the strongest, 0 means
   not the same business. Never a decimal: the scorer produces a handful of
   outcomes, so a value like 2.7 would be precision nobody measured. Colour
   carries the same ordering as the number so the two never disagree. */
.tier-chip {
    display: inline-flex; align-items: center; gap: .34rem;
    padding: .2rem .5rem .2rem .26rem; border-radius: 7px;
    border: 1px solid transparent; background: var(--surface-3);
    font-size: .7rem; font-weight: 700; letter-spacing: .01em;
    white-space: nowrap; cursor: help; max-width: 100%;
}
.tier-chip > span { overflow: hidden; text-overflow: ellipsis; }
.tier-chip .tier-n {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 5px;
    background: rgba(255, 255, 255, .72);
    font-size: .64rem; font-weight: 800; font-style: normal; line-height: 1;
}
.tier-chip .tier-n.q { font-size: .68rem; }
/* The badge is a translucent white wash over the chip's own fill. On the paler
   green that reads fine; on yellow, orange and red it needs to be more opaque or
   the digit greys out against its own background. */
.tier-chip.likely .tier-n,
.tier-chip.unsure .tier-n,
.tier-chip.different .tier-n { background: rgba(255, 255, 255, .9); }

/* Green -> yellow -> orange -> red, descending with the level, so colour and
   number always say the same thing. Every text/background pair here clears 4.5:1
   contrast: the yellow and orange are dark enough to read as text, not as the
   pale highlighter shades those hues default to. */
.tier-chip.same      { background: #E3F7EB; color: #04682F; border-color: #C6E6D2; }  /* 3 green  */
.tier-chip.likely    { background: #FCF6D8; color: #6B5602; border-color: #EBDD97; }  /* 2 yellow */
.tier-chip.unsure    { background: #FDEBDC; color: #9A4708; border-color: #F5CDA8; }  /* 1 orange */
.tier-chip.different { background: #FDE9E8; color: #96201B; border-color: #F2CFCB; }  /* 0 red    */
/* "Pick one" has no level, and blue keeps it off the 0-3 ramp entirely — it is a
   different kind of answer, not a stronger or weaker one. */
.tier-chip.choose    { background: #EAF0FE; color: #1B4DB1; border-color: #CFDDF9; }
.tier-chip.none {
    background: transparent; color: var(--text-dim); border-color: var(--border-soft);
    font-weight: 500; cursor: default; padding-left: .5rem;
}

/* lg — the review queue row, where the level is the first thing scanned. */
.tier-chip.lg { font-size: .78rem; padding: .3rem .6rem .3rem .32rem; gap: .4rem; }
.tier-chip.lg .tier-n { width: 19px; height: 19px; border-radius: 6px; font-size: .72rem; }

/* xl — the comparison modal, where it replaces the old headline percentage. */
.tier-chip.xl { font-size: .95rem; padding: .38rem .75rem .38rem .4rem; gap: .48rem; }
.tier-chip.xl .tier-n { width: 24px; height: 24px; border-radius: 7px; font-size: .85rem; }