/* ============================================================================
   Image picker (.npi-*) - shared by the article/content editors:
     - ttcontrols/NewPageInfo.ascx  (TTEditControls.aspx, TTContent.aspx, ...)
     - design/edit.aspx             (site designer)
     - TTMassMail.aspx              (tournament email: image picker + attachments)

   Why this is its own file and not sinc-setup.css: the picker renders inside
   customer tournament sites, whose own stylesheet loads AFTER ours (that is why
   the old "Cancel" link came out in the site theme colour). Those masters do not
   load sinc-setup.css, and pulling a 9,500-line component library into a customer
   page would restyle their site. So the design-system values are declared here as
   local custom properties on .npi-picker and every colour is stated explicitly
   rather than inherited. Values match the --setup-* tokens in sinc-setup.css.

   Bump the ?v= query string on both pages when editing this file.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Icons. Deliberately NOT Material Design Icons: this picker is hosted by masters
   that do not all load the MDI font (TT9, TTMaster, Sinc26, SincShell...), and the
   ones that do are split across MDI 3.6.95 / 5.3.45 / 6.1.95, so a shared @import
   would risk a second conflicting copy. These are masked SVGs, so they inherit
   currentColor and need no font at all. Sized with font-size on the parent.
   ---------------------------------------------------------------------------- */
.npi-ico {
    display:inline-block; width:1em; height:1em; flex:0 0 auto;
    background-color:currentColor; vertical-align:-0.125em;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
}
.npi-ico-close {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}
.npi-ico-zoom {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14M12 10h-2v2H9v-2H7V9h2V7h1v2h2z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14M12 10h-2v2H9v-2H7V9h2V7h1v2h2z'/%3E%3C/svg%3E");
}
.npi-ico-check {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
.npi-ico-image {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m0 16H5l3.5-4.5 2.5 3.01L14.5 13z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m0 16H5l3.5-4.5 2.5 3.01L14.5 13z'/%3E%3C/svg%3E");
}
.npi-ico-upload {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M14 13v4h-4v-4H7l5-5 5 5z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M14 13v4h-4v-4H7l5-5 5 5z'/%3E%3C/svg%3E");
}
.npi-ico-emoticon {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8m3.5-9a1.5 1.5 0 1 1-1.5-1.5 1.5 1.5 0 0 1 1.5 1.5m-5 0A1.5 1.5 0 1 1 9 9.5a1.5 1.5 0 0 1 1.5 1.5M12 17.5A5.5 5.5 0 0 1 6.6 13h10.8a5.5 5.5 0 0 1-5.4 4.5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8m3.5-9a1.5 1.5 0 1 1-1.5-1.5 1.5 1.5 0 0 1 1.5 1.5m-5 0A1.5 1.5 0 1 1 9 9.5a1.5 1.5 0 0 1 1.5 1.5M12 17.5A5.5 5.5 0 0 1 6.6 13h10.8a5.5 5.5 0 0 1-5.4 4.5'/%3E%3C/svg%3E");
}
.npi-ico-paperclip {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5a4 4 0 0 1-8 0V5a2.5 2.5 0 0 1 5 0v10.5a1 1 0 0 1-2 0V6H10v9.5a2.5 2.5 0 0 0 5 0V5a4 4 0 0 0-8 0v12.5a5.5 5.5 0 0 0 11 0V6z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5a4 4 0 0 1-8 0V5a2.5 2.5 0 0 1 5 0v10.5a1 1 0 0 1-2 0V6H10v9.5a2.5 2.5 0 0 0 5 0V5a4 4 0 0 0-8 0v12.5a5.5 5.5 0 0 0 11 0V6z'/%3E%3C/svg%3E");
}
.npi-ico-file {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m9 16v-2H6v2zm3-4v-2H6v2z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 9h5.5L13 3.5zM6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m9 16v-2H6v2zm3-4v-2H6v2z'/%3E%3C/svg%3E");
}
.npi-ico-search {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5'/%3E%3C/svg%3E");
}

.npi-picker {
    --npi-primary:#0f172a; --npi-accent:#5cb830; --npi-accent-hover:#4a9e28;
    --npi-blue:#3b82f6; --npi-blue-light:#eff6ff; --npi-border:#e2e8f0;
    --npi-border-light:#f1f5f9; --npi-text:#1e293b; --npi-text-secondary:#64748b;
    --npi-text-muted:#94a3b8; --npi-radius:12px; --npi-radius-sm:8px;
    --npi-transition:0.25s cubic-bezier(0.16,1,0.3,1);
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; color:var(--npi-text);
    text-align:left;
}
.npi-picker *, .npi-picker *:before, .npi-picker *:after { box-sizing:border-box; }

/* Header */
.npi-head {
    display:flex; align-items:center; gap:12px;
    background:var(--npi-primary); color:#fff;
    margin:0 -20px 0 -20px; padding:14px 20px;
    border-radius:16px 16px 0 0;
}
.npi-head .npi-head-icon {
    width:36px; height:36px; flex:0 0 36px; border-radius:50%;
    background:rgba(255,255,255,.12); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.npi-head h3 { margin:0; font-family:'Outfit','Segoe UI',Arial,sans-serif; font-weight:700; font-size:1.05rem; color:#fff; line-height:1.2; }
.npi-head p { margin:2px 0 0; font-size:.78rem; color:rgba(255,255,255,.7); }
.npi-head-spacer { flex:1 1 auto; }
/* Icon close button - replaces the old text "Cancel" link that inherited site colours */
a.npi-close, a.npi-close:link, a.npi-close:visited {
    width:34px; height:34px; flex:0 0 34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.10); color:#fff !important; font-size:20px;
    text-decoration:none !important; border:0; cursor:pointer;
    transition:background var(--npi-transition);
}
a.npi-close:hover { background:#dc2626; color:#fff !important; text-decoration:none !important; }

/* Body: library on the left, uploader on the right */
.npi-body { display:flex; gap:18px; align-items:flex-start; padding-top:16px; }
.npi-library { flex:1 1 auto; min-width:0; }
.npi-side { flex:0 0 264px; }
@media all and (max-width: 900px) {
    .npi-body { flex-direction:column; }
    .npi-side { flex:1 1 auto; width:100%; }
}

.npi-libhead { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.npi-libhead .npi-label { font-family:'Outfit','Segoe UI',Arial,sans-serif; font-weight:700; font-size:.9rem; color:var(--npi-text); }
.npi-count { font-size:.72rem; color:var(--npi-text-secondary); background:var(--npi-border-light); border-radius:999px; padding:2px 9px; }
.npi-search { margin-left:auto; position:relative; }
.npi-search i { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--npi-text-muted); font-size:16px; }
.npi-picker input.npi-searchbox {
    width:190px; background:#fff; color:var(--npi-text);
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:.8rem;
    padding:7px 10px 7px 30px; border:1.5px solid var(--npi-border);
    border-radius:var(--npi-radius-sm); transition:border-color .2s ease, box-shadow .2s ease;
}
.npi-picker input.npi-searchbox:focus { outline:none; border-color:var(--npi-accent); box-shadow:0 0 0 3px rgba(92,184,48,.25); }

/* Tile grid */
.npi-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:12px;
    max-height:46vh; overflow-y:auto; padding:4px 6px 4px 2px; margin:0; list-style:none;
}
.npi-tile { cursor:pointer; }
.npi-thumb {
    position:relative; height:96px; border:1.5px solid var(--npi-border);
    border-radius:var(--npi-radius); background:#fff; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    transition:border-color var(--npi-transition), box-shadow var(--npi-transition);
}
.npi-thumb img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; cursor:pointer; display:block; }
.npi-tile:hover .npi-thumb { border-color:var(--npi-blue); box-shadow:0 4px 14px rgba(15,23,42,.12); }
.npi-tile.npi-selected .npi-thumb { border-color:var(--npi-accent); border-width:2px; box-shadow:0 0 0 3px rgba(92,184,48,.25); }
.npi-name {
    margin-top:6px; font-size:.72rem; line-height:1.25; color:var(--npi-text-secondary);
    word-break:break-word; text-align:center;
}
.npi-tile.npi-selected .npi-name { color:var(--npi-text); font-weight:600; }
/* "View larger" magnifier */
.npi-picker button.npi-zoom {
    position:absolute; top:5px; right:5px; width:26px; height:26px; padding:0;
    border:0; border-radius:6px; background:rgba(15,23,42,.62); color:#fff;
    font-size:15px; line-height:1; cursor:pointer; opacity:0;
    display:flex; align-items:center; justify-content:center;
    transition:opacity var(--npi-transition), background var(--npi-transition);
}
.npi-tile:hover button.npi-zoom, .npi-picker button.npi-zoom:focus { opacity:1; }
.npi-picker button.npi-zoom:hover { background:var(--npi-primary); }
.npi-check {
    position:absolute; top:5px; left:5px; width:22px; height:22px; border-radius:50%;
    background:var(--npi-accent); color:#fff; font-size:14px; display:none;
    align-items:center; justify-content:center;
}
.npi-tile.npi-selected .npi-check { display:flex; }
.npi-empty { padding:26px; text-align:center; color:var(--npi-text-secondary); font-size:.85rem; }

/* Upload card */
.npi-drop {
    border:2px dashed var(--npi-border); border-radius:var(--npi-radius);
    background:#fbfdfa; padding:18px 14px; text-align:center;
}
.npi-drop > .npi-ico { font-size:34px; color:var(--npi-accent); line-height:1; }
.npi-drop-title { font-family:'Outfit','Segoe UI',Arial,sans-serif; font-weight:700; font-size:.9rem; color:var(--npi-text); margin-top:6px; }
.npi-drop-hint { font-size:.72rem; color:var(--npi-text-muted); margin-top:3px; margin-bottom:12px; }
/* EO AJAXUploader chrome. The file input is an invisible overlay EO positions over the
   Browse button, so the button keeps its normal box - only its skin changes. */
.npi-drop .npi-uprow { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.npi-drop input[type="text"] {
    flex:1 1 110px; min-width:0; background:#fff; color:var(--npi-text);
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:.75rem;
    padding:7px 10px; border:1.5px solid var(--npi-border); border-radius:var(--npi-radius-sm);
}
/* AutoUpload is on, so the explicit Upload button is redundant. Hidden rather than
   removed - EO's LayoutTemplate requires the control to exist. It sits AFTER the
   Browse button, so hiding it does not move the invisible file input EO overlays
   on top of Browse. */
.npi-drop input[type="submit"] { display:none; }
.npi-drop input[type="button"] {
    background:var(--npi-accent); color:#fff; border:0; border-radius:var(--npi-radius-sm);
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-weight:600; font-size:.78rem;
    padding:8px 14px; cursor:pointer; transition:background var(--npi-transition);
}
.npi-drop input[type="button"]:hover { background:var(--npi-accent-hover); }
.npi-progress { margin-top:12px; border-radius:999px; overflow:hidden; background:var(--npi-border-light); }
/* EO renders the CallbackPanel as a shrink-to-fit <table>; keep it full width. */
.npi-picker > table { width:100%; }

/* Options bar shown once an image is chosen */
.npi-options {
    display:none; align-items:center; gap:14px; flex-wrap:wrap;
    margin:16px -20px -20px -20px; padding:14px 20px;
    background:#f8fafc; border-top:1px solid var(--npi-border);
    border-radius:0 0 16px 16px;
}
.npi-options .npi-prevbox {
    width:74px; height:56px; flex:0 0 74px; border:1px solid var(--npi-border);
    border-radius:var(--npi-radius-sm); background:#fff; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.npi-options .npi-prevbox img { max-width:100%; max-height:100%; }
.npi-field { display:flex; flex-direction:column; gap:4px; }
.npi-field > label { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--npi-text-secondary); }
/* NOTE: no background on select - it would wipe Bootstrap's chevron SVG */
.npi-picker .npi-field select, .npi-picker .npi-field input[type="text"] {
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:.8rem; color:var(--npi-text);
    padding:7px 10px; border:1.5px solid var(--npi-border); border-radius:var(--npi-radius-sm);
    transition:border-color .2s ease, box-shadow .2s ease;
}
.npi-picker .npi-field input[type="text"] { background:#fff; width:74px; }
.npi-picker .npi-field select:focus, .npi-picker .npi-field input[type="text"]:focus {
    outline:none; border-color:var(--npi-accent); box-shadow:0 0 0 3px rgba(92,184,48,.25);
}
.npi-options .npi-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.npi-picker input.npi-insert {
    background:var(--npi-accent); color:#fff; border:0; border-radius:var(--npi-radius-sm);
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-weight:600; font-size:.85rem;
    padding:10px 20px; cursor:pointer; transition:background var(--npi-transition);
}
.npi-picker input.npi-insert:hover { background:var(--npi-accent-hover); }
a.npi-ghost, a.npi-ghost:link, a.npi-ghost:visited {
    color:var(--npi-text-secondary) !important; text-decoration:none !important;
    font-size:.82rem; font-weight:600; padding:10px 12px; border-radius:var(--npi-radius-sm);
}
a.npi-ghost:hover { background:var(--npi-border-light); color:var(--npi-text) !important; text-decoration:none !important; }

/* Toolbar button under the editor */
a.npi-toolbtn, a.npi-toolbtn:link, a.npi-toolbtn:visited {
    display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
    margin-left:8px; padding:7px 15px; border-radius:8px; border:0;
    background:#5cb830; color:#fff !important;
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-weight:600; font-size:.82rem;
    text-decoration:none !important; cursor:pointer;
    box-shadow:0 1px 3px rgba(15,23,42,.18);
    transition:background 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s cubic-bezier(0.16,1,0.3,1);
}
a.npi-toolbtn:hover { background:#4a9e28; color:#fff !important; text-decoration:none !important; box-shadow:0 3px 8px rgba(15,23,42,.22); }
a.npi-toolbtn .npi-ico { font-size:16px; line-height:1; }
/* Secondary toolbar button (e.g. Insert Icon) - same shape, quieter colour. */
a.npi-toolbtn-alt, a.npi-toolbtn-alt:link, a.npi-toolbtn-alt:visited {
    background:#fff; color:#1e293b !important; border:1.5px solid #e2e8f0;
    padding:6px 14px; box-shadow:none;
}
a.npi-toolbtn-alt:hover { background:#f1f5f9; color:#1e293b !important; border-color:#94a3b8; box-shadow:none; }

/* Larger-preview lightbox */
.npi-lightbox {
    display:none; position:fixed; inset:0; z-index:22050;
    background:rgba(15,23,42,.82); align-items:center; justify-content:center; padding:40px;
}
.npi-lightbox.npi-open { display:flex; }
.npi-lightbox figure { margin:0; text-align:center; max-width:100%; max-height:100%; }
.npi-lightbox img { max-width:88vw; max-height:78vh; border-radius:10px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.npi-lightbox figcaption { margin-top:12px; color:#fff; font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:.85rem; }
.npi-lightbox .npi-lbclose {
    position:absolute; top:18px; right:22px; width:40px; height:40px; border:0; border-radius:50%;
    background:rgba(255,255,255,.14); color:#fff; font-size:24px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.npi-lightbox .npi-lbclose:hover { background:#dc2626; }

/* ----------------------------------------------------------------------------
   Modal shell (TTMassMail). NewPageInfo hosts the picker inside an existing
   dialog and slide-toggles it; TTMassMail is a plain page, so the picker needs
   its own overlay. The card repeats .d_in's padding (0 20px 20px) and 16px
   radius because .npi-head / .npi-options bleed to the edges with -20px margins.

   max-height, NOT height - a fixed height forces a second scrollbar that clips
   the Insert button once the options bar appears (see commit 2a981ff0).
   ---------------------------------------------------------------------------- */
.npi-modal {
    display:none; position:fixed; inset:0; z-index:22000;
    background:rgba(15,23,42,.55);
    align-items:flex-start; justify-content:center;
    padding:28px 16px; overflow-y:auto;
}
.npi-modal.npi-open { display:flex; }
.npi-modal-card {
    width:1180px; max-width:96vw; max-height:94vh; overflow-y:auto;
    padding:0 20px 20px 20px; background:#fff;
    border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.35);
}
/* The header must stay reachable while the card scrolls. */
.npi-modal-card .npi-head { position:sticky; top:0; z-index:2; }

/* The picker's body is wrapped in an EO CallbackPanel, which renders as a one-cell
   <table style="width:100%"> - and under automatic table layout that 100% is only a
   suggestion. The table grows toward its content's preferred width instead, so a long
   file name widened the list to 672px, shoved the 264px uploader panel out past the
   card's right edge and put a horizontal scrollbar under the whole modal. Measured on
   the live USFA page: card 820, table 954, uploader ending at 974.

   table-layout:fixed makes 100% mean 100%. The library is then held to the card, and
   .npi-fname's ellipsis does the work it was always meant to do. Scoped to the direct
   child so it only hits the callback panel, never a table inside the picker content.
   See docs/reference/ and the EO CallbackPanel note. */
.npi-modal-card > table { table-layout:fixed; width:100%; }

/* ----------------------------------------------------------------------------
   Attachment list. Rows rather than tiles: these are PDFs/spreadsheets/docs
   with no useful thumbnail, so the file name is the thing being scanned.
   ---------------------------------------------------------------------------- */
.npi-filelist { max-height:46vh; overflow-y:auto; padding:2px; }
.npi-filerow {
    display:flex; align-items:center; gap:11px; width:100%;
    padding:9px 12px; margin-bottom:6px; cursor:pointer;
    border:1.5px solid var(--npi-border); border-radius:var(--npi-radius-sm);
    background:#fff; text-align:left;
    transition:border-color var(--npi-transition), box-shadow var(--npi-transition), background var(--npi-transition);
}
.npi-filerow:hover { border-color:var(--npi-blue); background:var(--npi-blue-light); }
.npi-filerow.npi-selected { border-color:var(--npi-accent); border-width:2px; box-shadow:0 0 0 3px rgba(92,184,48,.2); }
.npi-filerow .npi-ficon {
    width:34px; height:34px; flex:0 0 34px; border-radius:var(--npi-radius-sm);
    background:var(--npi-border-light); color:var(--npi-text-secondary);
    display:flex; align-items:center; justify-content:center; font-size:19px;
}
.npi-filerow.npi-selected .npi-ficon { background:var(--npi-accent); color:#fff; }
.npi-filerow .npi-fname {
    flex:1 1 auto; min-width:0; font-size:.85rem; color:var(--npi-text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.npi-filerow .npi-fext {
    flex:0 0 auto; font-size:.66rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:var(--npi-text-muted);
    background:var(--npi-border-light); border-radius:999px; padding:3px 9px;
}
.npi-filerow.npi-selected .npi-fext { background:rgba(92,184,48,.16); color:#3f7d22; }

/* Selected-attachment chip that sits on the compose form */
.npi-attachbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.npi-chip {
    display:none; align-items:center; gap:8px;
    padding:6px 8px 6px 12px; border-radius:999px;
    border:1.5px solid #cfe8bf; background:#f3faee;
    font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:.8rem; color:#1e293b;
}
.npi-chip.npi-open { display:inline-flex; }
.npi-chip .npi-ico { font-size:15px; color:#4a9e28; }
.npi-chip .npi-chipname { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
a.npi-chipx, a.npi-chipx:link, a.npi-chipx:visited {
    width:22px; height:22px; flex:0 0 22px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(15,23,42,.08); color:#475569 !important; font-size:14px;
    text-decoration:none !important; cursor:pointer;
}
a.npi-chipx:hover { background:#dc2626; color:#fff !important; text-decoration:none !important; }