/* Extracted from ecosystem.css — Shared overlays, notes, toast, session and contextual help chrome. */
/* Load after ecosystem.css and before existing ecosystem feature sheets; original order preserved. */

    /* shared modal overlay (deal/ref/adjust/expense/counterparty cards, prompts) */
    /* repeated utility classes (were copy-pasted inline styles in the JS renderers) */
    .tight { margin:-2px 0 6px; }
    /* §lead/tight (full-pass 2026-06-16 TR1): multi-sentence intro/help prose must wrap,
 not clip — .fin alone is nowrap+scroll (right for one-line meta, wrong for paragraphs).
 .tight marks a description (reduced margin) → it's prose, so it wraps too. Keeps plain
 .fin one-liners on nowrap+scroll. */
    .fin.lead, .fin.tight { white-space:normal; overflow:visible; overflow-wrap:anywhere; }
    .sec-h { font-weight:600; margin:12px 0 4px; }
    .card-h { font-weight:600; margin-bottom:4px; }
    /* §density: opt-in compact mode — ONLY tighter spacing, layout/flex/grid untouched. Every
 rule is scoped to body.dense so the default «comfort» look is never affected. */
    body.dense .rcard, body.dense .dcard { padding:6px 9px; }
    body.dense .frow { margin-bottom:3px; }
    body.dense .card-h { margin-bottom:2px; }
    body.dense .fin { margin-top:2px; }
    body.dense .dc-acts, body.dense .fbtns { gap:5px; }
    body.dense .b2b-pend { margin:2px 0; }
    body.dense .sec-h { margin:8px 0 3px; }
    .hint-pad { color:var(--tg-theme-hint-color,#888); padding:10px; }
    .err-pad { color:var(--neg,#c00); padding:10px; }
    .more-row { text-align:center; margin:8px 0; }
    .empty-cell { text-align:center; padding:14px; opacity:.7; }
    .mono-cp { font-family:monospace; cursor:pointer; text-decoration:underline dotted;
        word-break:break-all; }
    .meta { font-size:12px; color:var(--tg-theme-hint-color,#888); margin:2px 0 6px; }
    body.pro .meta { font-size:12.5px; }
    .meta-muted { color:var(--tg-theme-hint-color,#767676); opacity:.98; }
    .micro { font-size:11px; color:var(--ui-muted, var(--tg-theme-hint-color,#5a6573)); margin:2px 0; }
    .overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex;
        align-items:flex-start; justify-content:center; z-index:50; overflow:auto; padding:12px; }
    .modal { background:var(--tg-theme-bg-color,#fff); color:var(--tg-theme-text-color,#000);
        padding:14px; border-radius:10px; min-width:280px; max-width:96%; margin-bottom:24px;
        box-sizing:border-box; }
    .modal-head { display:flex; justify-content:space-between; align-items:center; gap:8px;
        margin-bottom:8px; }
    .mh-acts { display:flex; gap:6px; align-items:center; }
    /* #deal-card modal grids → ecosystem_deals.css. */
    /* #ref-card modal + shell → ecosystem_refs.css. */

    .notes-wrap { margin-top:7px !important; }
    .notes-count { color:var(--tg-theme-hint-color,#737c86); font-weight:500; }
    .notes-list { display:flex; flex-direction:column; gap:4px; margin-top:5px; }
    .note-item {
        padding:6px 7px; border:1px solid rgba(127,127,127,.10);
        border-radius:8px; background:var(--tg-theme-bg-color,#fff);
    }
    .note-item.is-pinned { border-color:rgba(51,144,236,.22); background:rgba(51,144,236,.045); }
    .note-head { display:flex; justify-content:space-between; gap:8px; color:var(--tg-theme-hint-color,#737c86); }
    .note-head span { font-size:8.5px; line-height:1.3; }
    .note-body { margin:3px 0 4px; white-space:pre-wrap; font-size:10.5px; line-height:1.35; }
    .notes-add { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; margin-top:6px; }
    .notes-body, .ne-body {
        width:100%; max-width:none; box-sizing:border-box; resize:vertical;
        padding:6px 7px; border:1px solid rgba(127,127,127,.20); border-radius:8px;
        background:var(--tg-theme-bg-color,#fff); color:var(--tg-theme-text-color,#111); font:inherit;
    }
    .notes-roles, .ne-roles {
        grid-column:1 / -1; color:var(--tg-theme-hint-color,#737c86); font-size:9px; line-height:1.45;
    }
    .notes-role { display:inline-flex; align-items:center; gap:2px; margin-right:7px; }
    .notes-role input { width:14px; height:14px; margin:0; }
    .notes-role-hint { opacity:.7; }
    .notes-save { align-self:start; min-height:32px; }
    .notes-empty { padding:9px; color:var(--tg-theme-hint-color,#737c86); font-size:9.5px; text-align:center; }
    .notes-empty.is-error { color:var(--neg,#c00); }
    .note-actions { margin:3px 0 0; gap:4px; }
    .note-actions .rk { flex:0 1 auto; min-width:0 !important; max-width:none; min-height:25px; padding:2px 6px; font-size:9px; }
    .notes-save { grid-column:2; grid-row:1; min-width:0 !important; }
    #qa-config .dash-cfg-list, #dash-config .dash-cfg-list {
        display:grid; grid-template-columns:repeat(2, minmax(230px, 1fr));
        gap:4px 12px; margin:6px 0 8px;
    }
    #qa-config .dash-cfg-row, #dash-config .dash-cfg-row {
        display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px;
    }
    #qa-config .dash-cfg-row span, #dash-config .dash-cfg-row span {
        flex:1; font-size:13px; line-height:1.25;
    }
    #qa-config .dash-cfg-row input, #dash-config .dash-cfg-row input {
        width:18px; height:18px; margin:0;
    }
    body.lite #qa-config .dash-cfg-list, body.lite #dash-config .dash-cfg-list {
        grid-template-columns:1fr;
    }
    .btn-primary { background: var(--tg-theme-button-color,#3390ec) !important;
        color: var(--tg-theme-button-text-color,#fff) !important; }
    .btn-primary:disabled {
        background: color-mix(in srgb, var(--tg-theme-hint-color, #708090) 28%, var(--tg-theme-secondary-bg-color, #e8edf2)) !important;
        color: color-mix(in srgb, var(--tg-theme-text-color, #111) 45%, transparent) !important;
        box-shadow: none !important;
        cursor: not-allowed;
    }
    /* bottom toast — action feedback near the thumb; #status keeps only counters */
    #toast { position:fixed; left:50%; transform:translateX(-50%); max-width:92%;
        bottom:calc(74px + env(safe-area-inset-bottom)); z-index:99; padding:10px 16px;
        border-radius:10px; font-weight:600; text-align:center; box-sizing:border-box;
        box-shadow:0 4px 16px rgba(0,0,0,.25); opacity:0; pointer-events:none;
        transition:opacity .2s; }
    #toast.show { opacity:1; }
    #toast.t-ok { background:#1a8d3e; color:#fff; }
    #toast.t-err { background:#d11; color:#fff; }
    #toast .toast-act {
        margin-left: 12px; background: none; border: none; color: inherit;
        font: inherit; font-weight: 700; text-decoration: underline;
        cursor: pointer; padding: 0;
    }
    /* §5D: initData expired / logout-all — sticky top banner with reload CTA */
    .session-expired-banner {
        position: fixed; top: 0; left: 0; right: 0; z-index: 200;
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: 10px; padding: 10px 12px;
        background: var(--ui-warn-bg, #b45309); color: var(--ui-on-accent, #fff); font-weight: 600; text-align: center;
        box-shadow: 0 2px 8px rgba(0,0,0,.18);
    }
    body[data-session="expired"] { padding-top: 64px; }
    .session-expired-banner .session-expired-reload {
        background: var(--tg-theme-secondary-bg-color, #fff) !important;
        color: var(--tg-theme-text-color, #92400e) !important; border: none;
        font-weight: 700;
    }
    /* §9B: orphan draft → live deal № */
    .dc-link-deal {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        margin: 0 0 10px; padding: 8px 10px;
        border-radius: 10px; background: rgba(127,127,127,.08);
    }
    .dc-link-deal .dc-link-num {
        width: 5.5rem; max-width: 40%;
    }
    /* Marketplace/Catalog modal density → ecosystem_market.css;
 Platform modal/list density → ecosystem_platform.css. */
    /* §billing module picker → ecosystem_checkout.css. */
    /* §dark-contrast (2026-07-10): light theme — gentle neutral borders. Dark overrides below. */
    #deal-form-modal #form {
        border: 1px solid rgba(127,127,127,.32);
        box-shadow: 0 2px 10px rgba(0,0,0,.14);
    }
    .nf-actions-sticky {
        border-top: 1px solid rgba(127,127,127,.22);
        margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px;
    }
    .frow > label { color: var(--tg-theme-text-color, #111); opacity: .78; }
    .frow > input, .frow > select, .frow > textarea {
        border-color: rgba(127,127,127,.40);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
    }
    #filters select, #filters input { border-color: rgba(127,127,127,.38); }
    .rk:not(.active) { box-shadow: inset 0 0 0 1px rgba(127,127,127,.24); }
    .led-shs .rk:not(.active) { box-shadow: inset 0 0 0 1px var(--tg-theme-hint-color,#e2e2e2); }
    .modal {
        border: 1px solid rgba(127,127,127,.30);
        box-shadow: 0 12px 40px rgba(0,0,0,.30);
    }
    .dcard, .rcard, .dash-sec, #settings-bar .collap, #platform-bar .collap {
        border-color: rgba(127,127,127,.28);
    }
    .fin.tight.lead, .meta, .micro { opacity: .90; }
    /* Deals workspace styles extracted to ecosystem_deals.css. */

    /* Context help: one calm reading surface for every ❓ in the app. */
    .help-q {
        min-width:44px; min-height:44px !important; padding:0 !important;
        border-radius:999px !important; font-size:15px !important;
        color:var(--ui-muted-strong, var(--tg-theme-hint-color,#4a5560)) !important; background:transparent !important;
        box-shadow:inset 0 0 0 1px rgba(127,127,127,.16) !important;
    }
    .help-q:hover { color:var(--tg-theme-button-color,#3390ec) !important; }
    /* Contextual help-guide cards → ecosystem_help.css. */

@media (max-width: 420px) {
    .overlay {
        padding: 8px;
        align-items: stretch;
    }
    .overlay .modal {
        width: 100%;
        max-width: 390px;
        max-height: calc(100dvh - 16px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 0;
    }
    .overlay .modal-head {
        position: sticky;
        top: 0;
        flex: 0 0 auto;
        z-index: 1;
        background: inherit;
    }
    .overlay .modal > form,
    .overlay .modal .ecosystem-form,
    .overlay .modal [data-help-content],
    .overlay .modal .help-guide-shell {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
        min-height: 0;
    }
    .overlay .modal .ui-actions,
    .overlay .modal .fbtns {
        flex: 0 0 auto;
    }
    .overlay .modal button,
    .overlay .modal .rk,
    .overlay .modal .btn-primary {
        min-height: 44px;
    }
}