/* ==========================================================================
   NexusContent — opt-in content classes for PublicPortal map tools (S5 / S17)

   THE PROBLEM THIS SOLVES. Every readable-content rule today is keyed on a literal container id —
   `#map-sidebar-infotool-tab-container` for the label/value list, `#map-sidebar-searchtool-tab-container`
   for the search form and result cards. A tool that renders the same shapes into a different id inherits
   nothing and gets raw Bootstrap: a bordered, striped table clipped by `overflow-x: hidden` on a 375px
   screen. So the styling was effectively per-tool, and adopting it meant copying a block.

   THE THREE-SHELL RULE (non-negotiable). No rule in this file is nested under a shell selector — not
   `.nexus-sheet--snap`, not `.nexus-sheet--dismiss`, not `.turbosidebar`, not `.ol-popup`, and not an id.
   One class therefore renders identically in:
     1. the mobile snap bottom sheet,
     2. the desktop full-height sidebar panel,
     3. the OpenLayers anchored popup,
     4. a plain mobile panel with NO sheet at all — which is the whole point, because a tool whose content
        merely breaks at 375px must be fixable WITHOUT being given a bottom sheet it does not need.

   Media queries are fine; shell selectors are not. A breakpoint is not a shell.

   HOW A TOOL ADOPTS ONE. Add the class to the CONTAINER at runtime, gated on PublicPortal — never by
   editing the markup of a shared component, because most of these components also render on the
   IntranetPortal (see Docs/mobile-guidelines.md section 6). The generated table markup is left untouched;
   these rules reach it through the container class.

       if (mapVars.isPublicPortal) {
           document.getElementById('<tool>-tab-container').classList.add('nexus-content', 'nexus-list');
       }

   `.nexus-content` carries the shared resets; add exactly one shape class next to it.
   ========================================================================== */

/* COMBINATOR RULE — read before editing any selector in this file.

   The container carries the class; the content is INJECTED into it by the tool's own JS, and how deeply it
   nests is the tool's business, not this file's. InfoTool does `.html()` straight into its container, so its
   heading is a direct child. SearchTool appends a `<script type="text/template">` partial that has its own
   inner `#map-sidebar-search<X>-table-container`, so the SAME heading lands THREE levels down.

   So `>` here is a bet on one tool's nesting depth, and every id-keyed rule this file replaced was a
   descendant selector for exactly that reason. Default to descendant. Use `>` only where a deeper match
   would be WRONG rather than merely unnecessary — `.nexus-content > br` below is the one such case, and it
   says why. A `>` that is only "tighter" is a rule that silently stops applying when a tool re-nests.

   This was not theoretical: S23 shipped `.nexus-cards > h3` and the SearchTool caption lost all styling on
   mobile while desktop kept it, because the desktop rule was still a descendant one. */

/* Shared resets for any adopted container. Kept minimal: only what every shape needs. */
.nexus-content > br {
    /* Direct child ON PURPOSE (see the combinator rule above): a <br> INSIDE a value cell (UNICEF
       multi-line values, addresses) is real content and must survive. This reaches the structural spacers
       of a tool that injects at top level; a tool that nests them opts into the descendant form — see
       `.nexus-cards br`. */
    display: none;
}

.nexus-content a {
    color: #1e5fd0;
    word-break: break-word;
}

/* ==========================================================================
   .nexus-list — a Bootstrap table turned into a stacked label/value list.

   Small uppercase label on top, value below, both left-aligned, hairline separators. Chosen because a
   long value wraps cleanly in a narrow column instead of being squeezed to the right and clipped.
   Note the cost, so it is a deliberate choice and not a surprise: stacking makes each row roughly 1.4x
   taller than the side-by-side form, which matters when it lands in a sheet that is also shorter.
   ========================================================================== */
.nexus-list table,
.nexus-list tbody,
.nexus-list tr,
.nexus-list th,
.nexus-list td {
    display: block;
    width: 100%;
    border: 0 !important;
}

.nexus-list table {
    margin-bottom: 10px;
}

.nexus-list tr {
    background: transparent !important; /* kill zebra striping */
}

.nexus-list th {
    padding: 11px 4px 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6a7280;
    font-weight: 600;
    text-align: left;
}

.nexus-list td {
    padding: 2px 4px 11px;
    font-size: 14px;
    font-weight: 600;
    color: #1a2030;
    text-align: left;
    word-break: break-word;
    border-bottom: 1px solid #eef1f5 !important;
}

    .nexus-list tr:last-child td {
        border-bottom: 0 !important;
    }

/* Per-result headings are OPT-IN to hide, never blanket (S17). InfoTool's <h3> is redundant because its
   type row already names the result; AppCreatorMapInfoTool uses one <h3> PER LAYER as its only grouping,
   so hiding them there would merge N layers into an anonymous run of tables. Add this variant only when
   something else already names the result.

   Descendant, not `>`: InfoTool's UNICEF branch appends a `<div id="userServicesContainer">` that holds a
   second `<h3>`, and the id-keyed rule this replaced hid that one too. A `>` here would make it appear. */
.nexus-list--titleless h3,
.nexus-list--titleless h4 {
    display: none;
}

/* THE CAPTION, for every shape that keeps its heading.

   A kept heading is a small caption, never a centred page title. This one rule covers both shapes: a
   label/value list and a card list want the identical treatment, and they had it — as two byte-identical
   seven-declaration blocks, which the duplication detector rightly flagged.

   Descendant selectors, per the combinator rule at the top of this file: SearchTool's heading sits three
   levels below its container.

   Typography here is identical to the >=768px rule in public-portal-responsive.css, so the same label reads
   the same on both widths; only `margin` differs there (14px 2px 8px), because the sheet is tighter.

   `margin` is a reviewed value, not a default: the block this replaced used `30px 2px 10px`, and the change
   to a tight top was kept by the owner on 19.08.2026 (plan section 4.4). There is deliberately no
   "subsequent caption" rule — all 20 _Search*.cshtml partials fill their container with `.html()`, which
   replaces, so a second sibling caption cannot exist. */
.nexus-list h3,
.nexus-list h4,
.nexus-cards h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: #6a7280;
    text-align: left !important; /* beats a generator's .text-center, which is !important */
    margin: 4px 2px 10px;
}

/* ==========================================================================
   .nexus-form — a Bootstrap two-column form stacked into single-column fields (S17).

   `col-md-3` label + `col-md-9` field is the house style, and below 768px `col-md-*` carries NO width.
   What is left is the row's flex plus its negative gutters, so the label and the field end up side by
   side at intrinsic width with the field bleeding past the container. SearchTool hit this across ~26
   category partials and fixed it with an id-keyed block; this is that fix as a class, so the next form
   does not need a second copy. ExtractPlotElectronicIssuanceTool is the first tool to adopt it.

   TWO THINGS THIS DELIBERATELY DOES NOT DO, both learned the hard way:

   1. It zeroes the row's GUTTERS only — `margin-left/right`. It never touches `.form-group`'s
      `margin-bottom`, which is the only thing separating one field from the next; zeroing it turns the
      form into an unreadable stack. A `display: block` row plus zeroed gutters is enough.

   2. It matches `.col` as well as `col-*`. Bootstrap's bare `.col` is the same flex child with the same
      problem, and a selector written only for `[class*="col-md-"]` silently skips any form authored with
      it — the same class of miss as the combinator rule at the top of this file.

   Shell-neutral like everything here: WHEN a tool gets this is the registry's business (mount()'s
   `content:`), not this file's.
   ========================================================================== */
.nexus-form .row.form-group,
.nexus-form .form-group.row {
    display: block;
    margin-left: 0;
    margin-right: 0;
}

.nexus-form [class*="col-"],
.nexus-form .col {
    -ms-flex: none;
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Byte-identical to the id-keyed rule this replaced. An earlier draft also set `font-size: 13px` and a
   muted colour here — a nicer default in isolation, but SearchTool has shipped these labels for months
   and nothing in the guidelines asks for the change, so it stayed out. Same call as the caption margins
   in section 4.4 of the plan: an aesthetic judgement is its own item, not a passenger in an extraction. */
.nexus-form .col-form-label {
    display: block;
    padding: 0 0 4px;
    font-weight: 600;
}

/* NO `.btn-primary` rule here on purpose. A full-width submit is right for a form whose action stands
   alone (ExtractPlot), and wrong for SearchTool, whose buttons live inside `.input-group` attached to a
   text field — blocking them there would break that flex row. So it belongs in the adopting tool's own
   block, not in the shared class. */

/* ==========================================================================
   .nexus-cards — a result table turned into a tappable card list.

   Targets cells BY POSITION, so it works for every category regardless of column count: first cell is
   the title, any middle cells are a muted subtitle, the last cell is the locate action.
   ========================================================================== */

/* Drop the column header two ways: a real <thead>, and the bare "<tr><td>label</td>…</tr>" header some
   generators emit — matched as "a row with no button", since a genuine result row always has the locate
   button. Without this, such a header renders as a convincing fake first card. */
.nexus-cards table.table-bordered thead,
.nexus-cards table.table-bordered tr:not(:has(button)),
.nexus-cards br {
    display: none;
}

.nexus-cards table.table-bordered,
.nexus-cards table.table-bordered tbody {
    display: block;
    width: 100%;
    border: 0;
    margin: 0;
}

.nexus-cards table.table-bordered tr {
    position: relative;
    display: block;
    background: #fff !important;
    border: 1px solid #e6e9ef;
    border-radius: 13px;
    padding: 12px 46px 12px 60px;
    margin-bottom: 9px;
    cursor: pointer;
}

    .nexus-cards table.table-bordered tr:active {
        background: #eef3ff !important;
        border-color: #b9cdf3;
    }

/* Leading pin badge. */
.nexus-cards table.table-bordered tr::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: #e2f5fa;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230aa6c6' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
}

.nexus-cards table.table-bordered td {
    display: block;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal;
}

    .nexus-cards table.table-bordered td:first-child {
        font-weight: 700;
        font-size: 15px;
        color: #161d2b;
        font-variant-numeric: tabular-nums;
    }

    .nexus-cards table.table-bordered td:not(:first-child):not(:last-child) {
        font-size: 12.5px;
        color: #6a7280;
        margin-top: 2px;
    }

/* Last cell is the locate action -> a trailing chevron at a 44px target. */
.nexus-cards table.table-bordered td:last-child {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* ONE definition of "a card action button", two shapes that use it.

   The trailing chevron is the common case: one action per row, so it is addressed by position. A tool with
   a SECOND action (PointOfInterestTool has delete next to locate) cannot be addressed by position, because
   a middle cell is styled as subtitle text and collapses the button to a sliver. So it opts in by class
   instead — `.nexus-card-action` — and overrides only what genuinely differs, which for POI is two
   declarations: the colour and the glyph size.

   The alternative was a second block, and that block came out 10-of-12 declarations identical to this one.
   Adding a shape means extending this selector list; it never means copying the block.

   The class is applied AT RUNTIME by the tool that needs it, never written into a shared component's
   markup — that markup also renders on the IntranetPortal, where this file is not loaded (see S24). */
.nexus-cards table.table-bordered td:last-child button,
.nexus-cards table.table-bordered .nexus-card-action {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: #1e5fd0 !important;

    /* The generators emit this as `btn btn-sm btn-success` (25 occurrences across the _Search* partials),
       so Bootstrap paints a GREEN focus ring on it — bootstrap.css:1878,
       `box-shadow: 0 0 0 0.2rem rgba(71, 203, 103, .5)`. Zero blur, so it is a solid ring, and it follows
       `border-radius`, which is 50% here: tapping the card drew a green CIRCLE around the chevron, and it
       lingered, because a tap leaves focus on the button.

       `!important` is required, not decorative: `.btn-success:not(:disabled):not(.disabled):active:focus`
       scores (0,5,0) against this selector's (0,3,3), so it wins on specificity while the press is held.
       The >=768px variant gets away with a plain `box-shadow: none` only because its selector is id-keyed
       and therefore already heavier. */
    box-shadow: none !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Killing the ring above removes the ONLY focus indication, so put a deliberate one back for keyboard
       users — same intent as the >=768px rule's `:focus-visible`, in this shape's own colour. `:focus-visible`
       and not `:focus`, so a tap does not paint it. */
    /* Extended to the class too, so an opt-in shape does not silently lose its focus ring. The two rules
       BELOW this one stay position-only on purpose: they hide the button's own icon and swap in the chevron
       glyph, which is right for a navigating action and wrong for anything else — POI's delete button has
       to keep its trash icon. */
    .nexus-cards table.table-bordered td:last-child button:focus-visible,
    .nexus-cards table.table-bordered .nexus-card-action:focus-visible {
        outline: 2px solid #1e5fd0;
        outline-offset: -4px;
    }

    .nexus-cards table.table-bordered td:last-child button i {
        display: none; /* replaced by the chevron below, so the category's own icon does not double up */
    }

    .nexus-cards table.table-bordered td:last-child button::before {
        content: "";
        width: 9px;
        height: 9px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(45deg);
        margin-left: -3px;
    }

/* The caption rule at the top of this file covers `.nexus-cards h3` too. The separate block that
   stood here was byte-identical to it, all seven declarations. */