/* ============================================================================
   GRMS Console component styles.

   A small, token-driven component layer for the GRMS (Grant Response
   Management System) console. Everything is namespaced `.grms-*` so it never
   leaks into other consoles. Colours/radii/shadows reference the design tokens
   already defined in design-tokens.css / theme-buzzrfp.css — no new hex values.

   Replaces: ~16 inline `style="background:#hex"` buttons, 6 copy-pasted status
   badge colour blocks, duplicated metric/filter-chip markup, and ~29 arbitrary
   `text-[10px]/[11px]` sizes.

   Generated with मायावी शक्ति 🪬
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.grms-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;          /* matches the old px-3 py-1.5 */
    border: 1px solid transparent;
    border-radius: var(--radius-md, 6px);
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
    line-height: 1.2;
    color: #fff;
    background: var(--brand-blue, #205493);
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease),
                background-color var(--transition-fast, 150ms ease);
    white-space: nowrap;

    /* HEIGHT IS FIXED IN PIXELS, and 44 is not an arbitrary number.
       Measured, not reasoned about: a `<button class="grms-btn">` came out at
       44px and an `<a class="grms-btn">` beside it at 29.25px, so the action
       bar's Workflow link sat visibly shorter than every button around it.

       The cause is not the glyphs and not the padding -- those already
       matched. It is theme-buzzrfp.css's WCAG 2.5.5 tap-target rule:

           #content-wrapper button:not(.btn-sm):not(.ms-summary)
               { min-height: 44px; }

       specificity (1,2,1), against this rule's (0,1,0). So every GRMS
       <button> is 44px whatever is written here, and only the 17 <a> elements
       ever obeyed us -- which is why a rem value here could never line the two
       up. Matching that 44px is therefore both the fix and the accessible
       answer; going lower would need the theme's consent, not an override.

       px, not rem: --root-font-size is 13px on this console, so the 2.25rem
       that used to sit here resolved to 29.25px, while the tap target it has
       to meet is an absolute 44. box-sizing keeps padding inside the box. */
    box-sizing: border-box;
    min-height: 44px;
}

/* An icon must not decide how tall its button is. */
.grms-btn > i,
.grms-btn > svg { line-height: 1; flex: none; }
.grms-btn:hover     { filter: brightness(0.94); }
.grms-btn:active    { filter: brightness(0.88); }
.grms-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 84, 147, 0.35);
}
.grms-btn:disabled,
.grms-btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: none; }

/* Size modifiers. In px for the same reason as the base rule above: at a 13px
   root, the old 2.75rem/1.75rem resolved to 35.75px/22.75px -- so `--lg` was
   SMALLER than a plain button (44px) rather than larger, and the modifier
   meant nothing on a <button>. Note `--sm` still only reaches an <a>: the
   theme's tap-target rule holds every <button> at 44px and excludes .btn-sm,
   not .grms-btn--sm, so a small button and a small link still disagree. Left
   as found -- narrowing 59 live controls below the WCAG target is the theme
   owner's call, not this file's. */
.grms-btn--lg { padding: 0.625rem 1rem; font-size: var(--text-base, 1rem); min-height: 48px; }
.grms-btn--sm { padding: 0.25rem 0.5rem; font-size: var(--text-xs, 0.769rem); min-height: 32px; }
.grms-btn--block { width: 100%; justify-content: center; }

/* Semantic variants — one colour per role, from theme tokens */
.grms-btn--primary { background: var(--brand-blue, #205493); }
.grms-btn--success { background: var(--success-600, #16A34A); }
.grms-btn--info    { background: var(--info-600, #2563EB); }
.grms-btn--ai      { background: #7C3AED; }   /* AI actions — violet (brand-consistent accent) */

/* Ghost / secondary outline button */
.grms-btn--ghost {
    background: #fff;
    color: var(--color-text, #171717);
    border-color: var(--color-border-strong, #d4d4d4);
}
.grms-btn--ghost:hover { background: var(--color-surface-hover, #fafafa); filter: none; }

/* ----------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.grms-card {
    background: #fff;
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--color-border, #e5e5e5);
    padding: 1.25rem;                   /* matches old p-5 */
}
.grms-card--tight { padding: 0.75rem; }  /* action bars (old p-3) */

/* ----------------------------------------------------------------------------
   File input

   Tailwind's Preflight strips the native file button bare — it resets
   ::file-selector-button to `border: 0`, `padding: 0` and a TRANSPARENT
   background, expecting you to rebuild it with the `file:*` utilities. Those
   utilities are not in this project's compiled Tailwind bundle (only the
   Preflight resets are, and there is no tailwind.config.js under BuzzRFP/ to
   rebuild from), so an unstyled `<input type="file">` rendered as naked
   "Choose file No file chosen" text with no button chrome and no box — visibly
   broken next to its bordered text/select/textarea siblings.

   This restores the chrome in the component layer instead, so it does not
   depend on a Tailwind rebuild. Box matches the sibling inputs in
   repository.html (border-gray-300 + rounded-md + text-sm).
   ------------------------------------------------------------------------- */
.grms-file {
    display: block;
    width: 100%;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #525252);
    background: #fff;
    border: 1px solid var(--color-border-strong, #d1d5db);
    border-radius: var(--radius-md, 6px);
    padding: 0.25rem 0.5rem;
    line-height: 1.6;
    cursor: pointer;
}
.grms-file:hover { background: var(--color-surface-hover, #fafafa); }
.grms-file:focus-visible,
.grms-file:focus-within {
    outline: none;
    border-color: var(--brand-blue, #205493);
    box-shadow: 0 0 0 3px rgba(32, 84, 147, 0.18);
}

/* The "Choose file" button itself. Styled as a compact secondary button so it
   reads as pressable and stays clear of the filename text beside it. */
.grms-file::file-selector-button {
    margin: 0.125rem 0.625rem 0.125rem 0;
    padding: 0.25rem 0.625rem;
    font-size: var(--text-xs, 0.769rem);
    font-weight: 600;
    color: var(--color-text, #171717);
    background: var(--neutral-100, #f5f5f5);
    border: 1px solid var(--color-border-strong, #d1d5db);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background 0.15s ease;
}
.grms-file::file-selector-button:hover {
    background: var(--color-border, #e5e5e5);
}

/* ----------------------------------------------------------------------------
   Status badges  (rendered by {% grms_status_badge %})
   ------------------------------------------------------------------------- */
.grms-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
    line-height: 1.4;
    white-space: nowrap;
}
.grms-badge--success { background: var(--success-100, #DCFCE7); color: var(--success-800, #166534); }
.grms-badge--warning { background: var(--warning-100, #FEF3C7); color: var(--warning-800, #92400E); }
.grms-badge--danger  { background: var(--danger-100,  #FEE2E2); color: var(--danger-800,  #991B1B); }
.grms-badge--info    { background: var(--info-100,    #DBEAFE); color: var(--info-800,    #1E40AF); }
.grms-badge--neutral { background: var(--neutral-100, #f5f5f5); color: var(--neutral-600, #525252); }

/* ----------------------------------------------------------------------------
   Metric / KPI cards  (rendered by metric_card.html)
   ------------------------------------------------------------------------- */
.grms-metric {
    display: block;
    background: #fff;
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    border: 1px solid var(--color-border, #e5e5e5);
    border-left: 4px solid var(--neutral-400, #a3a3a3);
    padding: 1rem;
    transition: box-shadow var(--transition-fast, 150ms ease),
                background-color var(--transition-fast, 150ms ease),
                transform var(--transition-fast, 150ms ease);
}
a.grms-metric:hover {
    box-shadow: var(--shadow-card-hover, 0 4px 12px rgba(0, 0, 0, 0.12));
    background: var(--color-surface-hover, #fafafa);
    transform: translateY(-3px);
}
a.grms-metric:active { transform: translateY(-1px); }
/* Nudge the trailing arrow to the right on hover — affordance that the tile is clickable. */
.grms-metric__label .fa-arrow-right { transition: transform var(--transition-fast, 150ms ease); }
a.grms-metric:hover .grms-metric__label .fa-arrow-right { transform: translateX(3px); }
.grms-metric__label { font-size: var(--text-xs, 0.769rem); color: var(--color-text-secondary, #525252); }
.grms-metric__value { font-size: var(--text-3xl, 1.538rem); font-weight: var(--weight-bold, 700); color: var(--color-text, #171717); line-height: 1.1; margin-top: 0.125rem; }
.grms-metric__hint  { font-size: var(--text-xs, 0.769rem); color: var(--color-text-muted, var(--neutral-500)); margin-top: 0.125rem; }

/* Accent border colours for metric cards */
.grms-metric--primary { border-left-color: var(--brand-blue, #205493); }
.grms-metric--success { border-left-color: var(--success-500, #22C55E); }
.grms-metric--info    { border-left-color: var(--info-500, #3B82F6); }
.grms-metric--warning { border-left-color: var(--warning-500, #F59E0B); }
.grms-metric--danger  { border-left-color: var(--danger-500, #EF4444); }
.grms-metric--neutral { border-left-color: var(--neutral-400, #a3a3a3); }

/* ----------------------------------------------------------------------------
   Filter chips  (rendered by filter_chip.html)
   ------------------------------------------------------------------------- */
.grms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
}
.grms-chip--info    { background: var(--info-100,    #DBEAFE); color: var(--info-800,    #1E40AF); }
.grms-chip--warning { background: var(--warning-100, #FEF3C7); color: var(--warning-800, #92400E); }
.grms-chip--danger  { background: var(--danger-100,  #FEE2E2); color: var(--danger-800,  #991B1B); }
.grms-chip--success { background: var(--success-100, #DCFCE7); color: var(--success-800, #166534); }
.grms-chip--neutral { background: var(--neutral-100, #f5f5f5); color: var(--neutral-600, #525252); }

/* ----------------------------------------------------------------------------
   Micro text  (replaces arbitrary text-[10px] / text-[11px])

   CLAMPED TO THE READABILITY FLOOR (WG-84, F3 tail).

   These two classes were written to replace the arbitrary size utilities, and
   210 call sites had already moved to them — but they sat OUTSIDE the floor
   theme-buzzrfp.css enforces on `text-[6px]…[11px]`, so the migration was
   quietly trading a floored size for an unfloored one. Measured:

                       16px root    14px laptop   13px density
     .grms-meta          12.30px      10.77px       10.00px
     .grms-meta-2        13.54px      11.84px       11.00px
     text-[10px]/[11px]  14.00px      12.25px       12.00px   (floored)

   So 210 elements rendered BELOW the 12px floor on every laptop and in every
   density session — 10px at worst — while the utilities they replaced could
   not. The rule API-1263 set was being honoured by the thing being removed and
   not by its replacement.

   `max(…, 12px)` leaves the 16px desktop root untouched (both values already
   clear 12px there) and lifts only laptop and density up to the floor. The px
   half is the same deliberate exception to WG-92's proportional-scaling
   doctrine that theme-buzzrfp.css records: a readability floor that scales is
   not a floor.

   The two sizes still differ where there is room to differ (13.54 vs 12.30 at a
   16px root) and converge at the floor, which is the correct behaviour for a
   floor — not a reason to collapse them into one class.
   ------------------------------------------------------------------------- */
.grms-meta   { font-size: max(var(--text-xs, 0.769rem), 12px); }   /* >=12px floor */
.grms-meta-2 { font-size: max(var(--text-sm, 0.846rem), 12px); }   /* >=12px floor */

/* ----------------------------------------------------------------------------
   Pagination — active page marker (replaces inline style="background:#205493")
   ------------------------------------------------------------------------- */
.grms-page-active {
    background: var(--brand-blue, #205493);
    border-color: var(--brand-blue, #205493);
    color: #fff;
}

/* ----------------------------------------------------------------------------
   Collapsible "Add a grant" toggle (grants list) — declutters the top so the
   grants table is front-and-center. The chevron rotates when open.
   ------------------------------------------------------------------------- */
.grms-add-grant > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: #fff;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    cursor: pointer;
    font-size: var(--text-sm, 0.846rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text, #171717);
    transition: background-color var(--transition-fast, 150ms ease);
}
.grms-add-grant > summary::-webkit-details-marker { display: none; }
.grms-add-grant > summary:hover { background: var(--color-surface-hover, #fafafa); }
.grms-add-chevron { transition: transform 0.2s ease; color: var(--color-text-muted, var(--neutral-500)); }
.grms-add-grant[open] > summary .grms-add-chevron { transform: rotate(180deg); }

/* ----------------------------------------------------------------------------
   Native <select> spacing — the Tailwind forms plugin draws a chevron, but the
   inline `px-2` utility overrides its right padding so the text collides with
   the arrow (e.g. "All statuses" looked struck through). Reserve room for it.
   ------------------------------------------------------------------------- */
.grms-page select { padding-right: 1.75rem; }

/* ----------------------------------------------------------------------------
   Saved-search chips (grants list) — pill with a hover-highlighted delete ×.
   ------------------------------------------------------------------------- */
.grms-saved {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.25rem 0.125rem 0.625rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--neutral-100, #f5f5f5);
    border: 1px solid var(--color-border, #e5e5e5);
    font-size: var(--text-sm, 0.846rem);
    line-height: 1.4;
}
.grms-saved__name { color: var(--color-text-secondary, #525252); font-weight: var(--weight-medium, 500); }
.grms-saved__name:hover { color: var(--brand-blue, #205493); text-decoration: underline; }
.grms-saved__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    color: var(--color-text-muted, var(--neutral-500));
    font-size: 0.7rem;
    transition: background-color var(--transition-fast, 150ms ease),
                color var(--transition-fast, 150ms ease);
}
.grms-saved__x:hover { background: var(--danger-100, #FEE2E2); color: var(--danger-700, #B91C1C); }

/* Live-search: dim results while the debounced re-fetch is in flight. */
.grms-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.15s ease; }

/* ----------------------------------------------------------------------------
   Entrance animations — applied to every GRMS page (wrapper has .grms-page).
   Cards, KPI tiles, and any element tagged .grms-rise-in (e.g. table panels)
   fade + rise in with a gentle stagger within their container. Respects
   prefers-reduced-motion.
   ------------------------------------------------------------------------- */
@keyframes grms-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.grms-page .grms-metric,
.grms-page .grms-card,
.grms-page .grms-rise-in {
    animation: grms-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* KPI tiles cascade (delays reset per grid — natural). */
.grms-page .grms-metric:nth-child(1) { animation-delay: 0.02s; }
.grms-page .grms-metric:nth-child(2) { animation-delay: 0.07s; }
.grms-page .grms-metric:nth-child(3) { animation-delay: 0.12s; }
.grms-page .grms-metric:nth-child(4) { animation-delay: 0.17s; }

/* Cards / panels cascade lightly within their column (4th+ just use 0 delay). */
.grms-page .grms-card:nth-child(1),
.grms-page .grms-rise-in:nth-child(1) { animation-delay: 0.04s; }
.grms-page .grms-card:nth-child(2),
.grms-page .grms-rise-in:nth-child(2) { animation-delay: 0.10s; }
.grms-page .grms-card:nth-child(3) { animation-delay: 0.16s; }
.grms-page .grms-card:nth-child(4) { animation-delay: 0.22s; }
.grms-page .grms-card:nth-child(5) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
    .grms-page .grms-metric,
    .grms-page .grms-card,
    .grms-page .grms-rise-in { animation: none; }
    a.grms-metric:hover,
    a.grms-metric:active { transform: none; }
    a.grms-metric:hover .grms-metric__label .fa-arrow-right { transform: none; }
}

/* ----------------------------------------------------------------------------
   Grant editor in the action bar (API-1575), now IN FLOW rather than a
   dropdown overlay.

   It began as an absolutely-positioned panel and that was wrong twice over.

   1. It could not win the stacking contest. `.grms-page .grms-card` below
      applies `animation: grms-rise ... both`, and keyframes carrying a
      `transform` give EVERY card a permanent stacking context. The panel's
      z-index was therefore scoped inside the action bar's own context, which
      has z-index:auto, so every later card painted straight over it -- the
      Overview card landed on top of the open form. A z-index on the bar would
      have papered over this, and the next card to gain a stacking context
      would have broken it again.

   2. The panel is no longer small. It carries the grant fields AND the whole
      Pursuit decision & risk section, so an overlay was the wrong pattern
      regardless of who won the z-index.

   So there is no overlay and no <details>: the trigger is a plain <button>
   in the action row and the panel is a SIBLING of that row, un-hidden by
   script. It expands in normal flow and pushes the page down. Nothing to
   stack, nothing to clip.

   A <details> could not express this. Its summary and its content are one
   element, so either the trigger sits inline in the row and the panel is
   stuck at the trigger's width, or the panel spans the card and the trigger
   is forced onto a row of its own -- which is exactly what "align them
   together not in separate line" rejected.
   ------------------------------------------------------------------------- */
/* There is no wrapper element to align: the trigger lives in the action row
   and the panel is its sibling, so the chevron is all that is left to style.
   It flips off `.is-open`, which the toggle script sets on the button -- a
   [open] attribute selector has nothing to attach to now.

   Two earlier attempts at aligning a wrapper are worth keeping, because both
   failure modes are easy to repeat:

     display:flex + justify-content:flex-end   -> overrode .grms-btn's
         inline-flex, so the trigger stretched the whole row and read as an
         empty input with a stray label at its right end.
     width:max-content + margin-left:auto      -> `margin-left:auto` does
         NOTHING to an inline-level box, and .grms-btn is inline-flex, so the
         button sat on the LEFT. */
.grms-btn.is-open .grms-add-chevron { transform: rotate(180deg); }

/* ----------------------------------------------------------------------------
   Edit grant details as a MODAL <dialog> (WG-166).

   It opened in flow at full card width -- about a screen and a half on a grant
   with a pursuit record, pushing the Overview down the page. It was in flow
   because an absolutely positioned overlay had been painted UNDER the cards:
   each `.grms-page .grms-card` animates a transform and so forms a stacking
   context no z-index escapes. showModal() puts the dialog in the browser's TOP
   LAYER instead, which sits above all of that -- so none of these rules needs a
   z-index, and none should grow one.

   Layout: a column of head / body / actions. Only the BODY scrolls, so the title,
   the close button and Save stay in view however long the editor is. The Save row
   is a footer now, not the in-flow bar the old comment here argued should not be
   sticky: that argument was about a bar pinned to the VIEWPORT over the page;
   this one is inside the dialog's own box.

   Buttons are sized in px, not rem: this console's root font is 13-14px, and the
   theme's tap-target rule is an absolute 44px (API-1579). */
.grms-editpop__panel {
    /* Centred the same way, and for the same reason, as .gc-dialog
       (grms-confirm.css): tailwind's preflight resets the UA's `margin: auto` on
       <dialog> to 0, which drops a modal into the TOP-LEFT corner -- measured
       here too, rect x=0 y=0, with the backdrop correctly covering the page. */
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(60rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-lg, 8px);
    background: #fff;
    color: var(--color-text, #1f2937);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    overflow: hidden;       /* the body scrolls, the box does not */
}
@supports (height: 100dvh) {
    .grms-editpop__panel { max-height: calc(100dvh - 2rem); }
}
.grms-editpop__panel[open] {
    display: flex;
    flex-direction: column;
}
.grms-editpop__panel::backdrop {
    background: rgba(15, 23, 42, 0.5);
}
.grms-editpop__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #e5e5e5);
}
.grms-editpop__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #1f2937);
}
.grms-editpop__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 6px);
    background: transparent;
    color: var(--neutral-600, #4b5563);
    cursor: pointer;
}
.grms-editpop__close:hover {
    background: var(--neutral-100, #f3f4f6);
    color: var(--color-text, #1f2937);
}
.grms-editpop__close:focus-visible {
    outline: 2px solid var(--color-accent, #205493);
    outline-offset: 2px;
}
.grms-editpop__body {
    flex: 1 1 auto;
    min-height: 0;          /* lets the flex child shrink so it can scroll */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem 1.25rem;
}

/* The panel's single Save (API-1580), now the dialog's footer. It replaced seven
   submit buttons -- one for the grant, five for the risk rows, one for the
   pursuit record -- so it keeps a row of its own with a divider. */
.grms-editpop__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border, #e5e5e5);
    background: var(--neutral-50, #fafafa);
}
.grms-editpop__note {
    margin-right: auto;
    font-size: 0.75rem;
    color: var(--neutral-600, #4b5563);
}

/* The page behind a modal does not scroll: a wheel over the backdrop would
   otherwise move the grant underneath while the editor stays put. */
html.grms-dlg-open { overflow: hidden; }

/* THE MOVE POPUP (WG-232..235) -- the editor's dialog shell, narrower: it holds
   two stages' owner + Stage Due Date and, where needed, a reason. */
.grms-editpop__panel.grms-movepop { width: min(36rem, calc(100vw - 2rem)); }
.grms-movepop__form { display: flex; flex-direction: column; gap: 1rem; }
.grms-movepop__stage {
    margin: 0; padding: .75rem .875rem .875rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-md, 6px);
}
.grms-movepop__stage.is-required {
    border-color: var(--lokentra-blue-200, #C0D8EA);
    background: var(--lokentra-blue-50, #F2F7FB);
}
.grms-movepop__legend {
    display: flex; align-items: baseline; gap: .5rem; padding: 0 .25rem;
    font-size: .9375rem; font-weight: 600; color: var(--color-text, #1f2937);
}
.grms-movepop__role {
    font-size: .75rem; font-weight: 500; letter-spacing: .02em;
    color: var(--neutral-600, #4b5563);
}
.grms-movepop__grid { display: grid; grid-template-columns: 1fr 11rem; gap: .75rem; }
/* The Reassign popup's owner-only picker (WG-246): one field, the full width. */
.grms-movepop__grid.grms-movepop__grid--one { grid-template-columns: 1fr; }
.grms-movepop__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.grms-movepop__label { font-size: .8125rem; font-weight: 600; color: var(--neutral-700, #374151); }
.grms-movepop__req { color: var(--color-danger, #b91c1c); }
.grms-movepop__hint { margin: .5rem 0 0; font-size: .75rem; color: var(--neutral-600, #4b5563); }
.grms-movepop__form > .grms-movepop__hint { margin: 0; }
.grms-movepop__error {
    display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem;
    padding: .625rem .75rem; border-radius: var(--radius-md, 6px);
    background: var(--color-danger-bg, #fef2f2); color: var(--color-danger, #b91c1c);
    font-size: .8125rem; box-shadow: inset 0 0 0 1px #fecaca;
}
.grms-movepop__error i { margin-top: .15rem; }
/* THE MISSING-FIELD WARNINGS, in the popup (WG-239): one summary line at the
   top, one message under each empty field. Both ship `hidden`; the [hidden]
   guards are load-bearing, because an author `display` beats the browser's own
   [hidden] rule (the WG-122 lesson) and the warnings would show on open. */
.grms-movepop__warn {
    display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem;
    padding: .625rem .75rem; border-radius: var(--radius-md, 6px);
    background: #fffbeb; color: #92400e; font-size: .8125rem; font-weight: 600;
    box-shadow: inset 0 0 0 1px #fde68a;
}
.grms-movepop__warn[hidden] { display: none; }
.grms-movepop__warn i { margin-top: .15rem; }
.grms-movepop__fielderr {
    display: block; font-size: .75rem; font-weight: 600; color: var(--color-danger, #b91c1c);
}
.grms-movepop__fielderr[hidden] { display: none; }
.grms-movepop .lokentra-input[aria-invalid="true"] {
    border-color: var(--color-danger, #b91c1c);
    box-shadow: 0 0 0 1px var(--color-danger, #b91c1c);
}
@media (max-width: 640px) {
    /* (0,2,0), because the narrower width above would otherwise beat the
       editor's own phone rule, (0,1,0), and float a card on a phone. */
    .grms-editpop__panel.grms-movepop { width: 100vw; }
    .grms-movepop__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* A phone gets the whole screen; a floating card with 1rem margins leaves
       too little room for a form this long. */
    .grms-editpop__panel {
        width: 100vw;
        max-height: 100vh;
        border: 0;
        border-radius: 0;
    }
    @supports (height: 100dvh) {
        .grms-editpop__panel { max-height: 100dvh; }
    }
}

/* ----------------------------------------------------------------------------
   Foldable cards on the grant detail page (API-1578).

   The page stacked ten full-width cards and most of them were showing an empty
   state at full height. These fold, and the CLOSED summary carries the state
   ("0 of 12 covered", "not validated") so folding costs no information.

   `open` is set conditionally in the template, never here: a card with content
   opens, an empty one stays shut.
   ------------------------------------------------------------------------- */
.grms-fold > summary { list-style: none; cursor: pointer; }
.grms-fold > summary::-webkit-details-marker { display: none; }

.grms-fold__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.grms-fold[open] > .grms-fold__summary { margin-bottom: 0.75rem; }

.grms-fold__state {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, var(--neutral-500));
    white-space: nowrap;
}
.grms-fold[open] > summary .grms-add-chevron { transform: rotate(180deg); }

/* A card reached by a #fragment must not sit there closed and looking empty. */
.grms-fold:target { outline: 2px solid var(--color-accent, #205493); outline-offset: 2px; }

/* ...nor land UNDER the page's fixed header (base.html's nav, 65px tall). A
   fragment jump -- My Activity's "Open Grant", Record's way back (WG-170) --
   puts the card's top at the top of the viewport, where the header covered the
   summary line and the first lines inside it: after a refused Record, most of
   the refusal itself. In px, because the header is. */
.grms-fold { scroll-margin-top: 80px; }

/* The Grant Approval Form, folded (WG-170). Its closed line carries more than
   the other folds' one short phrase -- progress, "N waiting on you" and the
   chain's state pill -- so it may wrap under the title on a phone instead of
   pushing the page sideways (.grms-fold__state is nowrap). */
.grms-approvals__summary { flex-wrap: wrap; row-gap: 0.375rem; }
.grms-approvals__state { flex-wrap: wrap; justify-content: flex-end; white-space: normal; }
.grms-approvals__outcome { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }

/* The Overview's field labels (WG-175): semibold in the console's deep brand
   ink -- the same step the console's table headers use, re-toned per tenant --
   so a label reads as the name of the field and not as the first words of the
   paragraph under it. Values keep the page's near-black. The three text-block
   labels (Summary, Eligibility, Submission process) go a size up: 15px, which
   sits between the 13.5px body and the next step on the scale (16px), chosen on
   a mock-up of the real page. */
.grms-ov-label { font-weight: 600; color: var(--lokentra-blue-800, #083850); }
.grms-ov-label--lead { font-size: 0.9375rem; }

/* The Overview's read-only risk table (WG-173, WG-176): Rating and Mitigation
   centred, Risk Area left -- it names the row. A class on the two centred
   columns rather than `th + th`, so tests/css_cascade.py (which refuses `+`)
   can still resolve the result. (0,2,3) outranks the theme's
   `.lokentra-table thead th { text-align: left }` at (0,1,2); theme-lokentra.css
   loads AFTER this sheet, so a tie would go to it, and a text-center utility
   (layered) loses outright. Do not simplify the selectors. */
table.grms-risk-table thead th.grms-risk-table__mid,
table.grms-risk-table tbody td.grms-risk-table__mid { text-align: center; }

/* Compliance Matrix rows (WG-174), in the Document Checklist's shape: the
   requirement across, a quiet line under it, the status once on the right, its
   top on the text's first line. Layout only -- colour and size are utilities on
   the elements. */
.grms-req {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
}
.grms-req__what { flex: 1 1 auto; min-width: 0; }
.grms-req__text { margin: 0; overflow-wrap: anywhere; }
.grms-req__meta { margin: 0.25rem 0 0; }
.grms-req__status { flex: 0 0 auto; }

/* A decided step's form, behind "Change decision" (WG-170). The summary wears
   the small ghost button; these only take away the disclosure marker and turn
   the chevron. */
.grms-stepfold > summary { list-style: none; cursor: pointer; }
.grms-stepfold > summary::-webkit-details-marker { display: none; }
.grms-stepfold[open] > summary { margin-bottom: 0.5rem; }
.grms-stepfold[open] > summary .grms-add-chevron { transform: rotate(180deg); }

/* ============================================================
   GRANT DETAIL ACTION BAR — the right-hand group never leaves row one.

   THE BUG (API-1585). The bar is one `flex-wrap` row holding two children: the
   AI buttons in their own <form> on the left, and Stage / Edit grant details /
   Workflow on the right. At 125% browser zoom the CSS viewport shrinks by a
   fifth, the two children no longer fit, and `flex-wrap` moves the WHOLE right
   group onto a second line.

   That is flexbox behaving correctly and still being wrong for this layout: a
   wrapping flex container breaks to a new line BEFORE it shrinks an item, so
   the left form is never asked to give up any space — it keeps its full
   max-content width and the right group is pushed out.

   Measured: the bar needs ~1103px of content width with the console font
   loaded, and at 125% zoom on a 1536px screen the card offers ~1178px. The
   margin is thin enough that it survives 120% and fails at 125%, which is
   exactly what was reported.

   THE FIX IS IN TWO PARTS, and the first is the one that matters.

   1. STRUCTURAL, and zoom-independent. The row stops wrapping; the LEFT form
      becomes the flexible item (`flex: 1 1 auto` + `min-width: 0`) so it wraps
      its own buttons internally, and the right group is `flex: none` so it
      cannot be displaced. However tight it gets, Stage / Edit / Workflow stay
      on the first line — at 150%, at 200%, on a narrow laptop.

   2. RECLAIM, so the single-line look survives 125% rather than merely
      degrading gracefully. Below 1400px the bar tightens its own horizontal
      padding and gaps and drops the redundant "Stage" caption (the badge
      carries a stream icon and reads "Eligibility review"; the caption is
      already hidden below 640px). Worth ~105px, which moves the wrap point
      from ~120% out past 140%.

   HEIGHTS ARE NOT TOUCHED. API-1579 fixed `.grms-btn` to 44px precisely because
   a <button> and an <a> disagreed; only horizontal padding moves here.

   Below 640px the row wraps again — on a phone, two stacked rows is right and
   the nowrap rule would overflow the card.
   ============================================================ */
/* EVERY SELECTOR HERE IS COMPOUND ON PURPOSE. The row also carries Tailwind's
   `.flex-wrap`, which is (0,1,0) — identical specificity to a bare
   `.grms-actionbar__row`, so which one wins would be decided by stylesheet
   ORDER. It happens to work today (grms-console.css loads after tailwind in
   base.html) and would silently invert the moment that order changed.
   `.grms-actionbar .grms-actionbar__row` is (0,2,0) and simply wins. */
@media (min-width: 640px) {
    .grms-actionbar .grms-actionbar__row   { flex-wrap: nowrap; }
    .grms-actionbar .grms-actionbar__left  { flex: 1 1 auto; min-width: 0; }
    .grms-actionbar .grms-actionbar__right { flex: 0 0 auto; }
}

@media (min-width: 640px) and (max-width: 1400px) {
    .grms-actionbar .grms-actionbar__row   { gap: 0.375rem; }
    .grms-actionbar .grms-actionbar__left,
    .grms-actionbar .grms-actionbar__right { gap: 0.375rem; }
    .grms-actionbar .grms-btn       { padding-left: 0.55rem; padding-right: 0.55rem; gap: 0.3rem; }
    /* Beats Tailwind's `sm:inline` on specificity, which is why it is scoped to
       the bar rather than written as a bare utility override. */
    .grms-actionbar .grms-actionbar__caption { display: none; }
}

/* --- The register table vocabulary -------------------------------------
   ONE shape for the Grants Report and the Grants list. These two registers had
   drifted into different tables -- one `table-fixed` with a <colgroup>, one on
   browser auto-layout -- so percentage widths bound on one page and not the
   other, and `.lokentra-cell--attr`'s 14rem cap truncated Funder on the list
   ("Texas Educatio…") while the report wrapped it. The same logical column was
   a different shape depending on which page you opened.

   These rules were previously an inline <style> block inside grants_report.html
   and so unreachable from any other template. They live here, on a shared
   class, so a second register cannot quietly grow a third variant.

   The `table.` prefix on the header rules is LOAD-BEARING: the theme's own
   `.lokentra-table thead th` is specificity (0,1,2) and outranks a bare
   `.grms-register-table th`, so without it these silently lose. That is not
   hypothetical -- it is recorded in grants_report.html as a first attempt that
   did exactly that.

   The SAME trap, one step worse, applies to the .lokentra-cell--attr override
   below. The theme's rule is `.lokentra-table td.lokentra-cell--attr` -- also
   (0,2,1), so a bare `.grms-register-table td.lokentra-cell--attr` TIES it and
   the winner is decided by file order. theme-lokentra.css is linked from
   _base_grms.html and lands AFTER base.html's grms-console.css, so the tie goes
   to the theme and the override does nothing. These rules previously lived in
   an inline <style> in the page BODY, which is why they won there and why
   moving them here needed the extra `.lokentra-table` on the front (0,3,1).
   Do not simplify these selectors.
   ---------------------------------------------------------------------- */

/* Fixed widths hold the columns; these let long values wrap inside their cell
   instead of pushing the table past the viewport. */
.grms-register-table th,
.grms-register-table td { overflow-wrap: break-word; }

/* The shared theme sets `white-space: nowrap; text-overflow: ellipsis` on
   .lokentra-cell--attr. Combined with fixed widths that CLIPPED real values
   ("Texas Educatio…", "$240K–$…") -- the exact opposite of showing every
   column. Wrap instead: a value on two lines is readable, a truncated one is
   not. Scoped to the registers so other consoles' single-line rows stay put. */
.lokentra-table.grms-register-table td.lokentra-cell--attr {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
}

/* Headers too -- "DEADLINE STATUS" was overlapping "FUNDING". The anchor inside
   a sortable header carries its own nowrap from .grms-sortable-th and needs the
   same treatment. */
table.grms-register-table thead th,
table.grms-register-table thead th a { white-space: normal; }

/* Header labels share a baseline at the bottom of the header band, so a short
   label sits directly above the data it heads rather than floating above a gap
   left by a taller neighbour. Cells anchor top so a multi-line row starts
   level. The pair is deliberate; they arrived together. */
table.grms-register-table thead th { vertical-align: bottom; }
table.grms-register-table tbody td { vertical-align: top; }

/* THE REF # COLUMN HAS NO COPY ICON, and therefore no alignment rules.
   A `.grms-ref-cell` / `.grms-ref-num` pair lived here: nowrap on the cell plus
   a fixed-width slot for the number, so the copy button beside it landed on one
   vertical line whatever the digit count. The button was removed from every
   register row -- the number alone is what the column shows now -- so there is
   nothing left to align and the rules went with it rather than lingering as
   selectors matching no markup.

   Worth keeping if it ever comes back: the slot could NOT be sized in `Nch` for
   N digits. `1ch` is the advance of the proportional "0" (7.47px here) while
   `tabular-nums` renders digits wider (7.68px), so `4ch` was 0.84px too narrow
   for four digits and would have started shifting the icon at reference number
   1000. It measured clean only because the highest number in use was 843. */

/* A status chip must wrap with its column rather than force it wider. */
table.grms-register-table .grms-badge {
    max-width: 100%;
    white-space: normal;
}

/* ----------------------------------------------------------------------------
   My Approvals — column widths

   Every pursuit renders its OWN <table>, so with auto layout each one sized its
   columns to its own content: a card whose step read "Institutional Lead" put
   the decision column in a different place from one reading "Board of
   Trustees". Down the page that looked like a stack of unrelated tables rather
   than one register, and the decision column was squeezed enough to clip the
   override field's placeholder mid-word.

   Percentages, not px: the page is read at whatever zoom the approver uses, and
   a px column would stop tracking the card it sits in.
   ------------------------------------------------------------------------- */
.grms-approve-table { table-layout: fixed; }
.grms-approve-col--step  { width: 30%; }
.grms-approve-col--state { width: 22%; }

/* `table-layout: fixed` only holds if the content can reflow — the step label
   and the conflict notice wrap instead of forcing the column wider. */
.grms-approve-table td,
.grms-approve-table th { overflow-wrap: anywhere; }

/* ----------------------------------------------------------------------------
   My Activity (WG-161)

   One card per band, rows inside — the same surface as .grms-card, so the page
   reads as part of the console rather than a new kind of screen. Built only
   from tokens this sheet already uses.

   A ROW IS "WHAT" ON THE LEFT AND "WHEN" ON THE RIGHT, the whole page over.
   Every band — signatures excepted, which keep WG-157's card — renders the same
   row, so the eye learns one shape once. On a phone the two stack.
   ------------------------------------------------------------------------- */
.grms-act {
    background: #fff;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.08));
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
/* No font-size here, deliberately: theme-buzzrfp.css sizes every h2 inside
   #content-wrapper with !important, so a size on this class is inert -- it was,
   measured at 25px against a declared .875rem. The section title takes the
   console's own h2, which is what every other GRMS page's section titles use. */
.grms-act__head {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .5rem;
}
/* A <p role="heading" aria-level="3">, not an <h3>, and that is what makes this
   rule live: the theme forces #content-wrapper h3 to 20px with !important, which
   left these labels nearly as large as the section titles above them. Same
   meaning to a screen reader, and no !important arms race. */
.grms-act__sub {
    display: flex; align-items: center; gap: .45rem;
    font-size: var(--text-xs, .75rem); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--neutral-500, #666666);
    margin: 1rem 0 .35rem;
}
.grms-act__head + .grms-act__sub,
.grms-act__head + div + .grms-act__sub { margin-top: .25rem; }
/* COUNT BADGES (WG-206). Centred on the heading's line, not its baseline: a pill
   on the baseline of a 20px heading sits visibly low. Tabular figures and a
   min-width so "3" and "12" are the same shape, a soft ring instead of a flat
   grey fill, and one size step per heading level. The brand tokens re-tone per
   tenant (WETCC's green), so nothing here is a literal brand colour. */
.grms-act__n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.375rem; height: 1.375rem; padding: 0 .45rem;
    border-radius: 999px; font-size: .6875rem; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0;
    background: var(--lokentra-blue-50, #F2F7FB); color: var(--lokentra-blue-800, #083850);
    box-shadow: inset 0 0 0 1px var(--lokentra-blue-100, #E1EDF6);
}
.grms-act__head > .grms-act__n { min-width: 1.625rem; height: 1.625rem; padding: 0 .55rem; font-size: .8125rem; }
.grms-act__n--danger {
    background: var(--color-danger-bg, #fef2f2); color: var(--color-danger, #b91c1c);
    box-shadow: inset 0 0 0 1px #fecaca;
}
/* A section's window, beside its count (WG-212): a quiet outlined chip, centred
   on the heading's line like the count badge -- the plain 12px grey text it was
   read as a stray caption. Outlined, not filled, so it never competes with the
   count, which is the figure that matters. */
.grms-act__hint {
    display: inline-flex; align-items: center; gap: .35rem; height: 1.625rem; padding: 0 .6rem;
    border-radius: 999px; font-size: .75rem; font-weight: 500; letter-spacing: .01em;
    color: var(--lokentra-ink-3, #66716F); background: transparent;
    box-shadow: inset 0 0 0 1px var(--lokentra-line, #E3E8E7);
}
.grms-act__hint i { font-size: .8em; color: var(--lokentra-blue-600, #106088); }

.grms-act__list { list-style: none; margin: 0; padding: 0; }
.grms-act__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .55rem 0;
    border-top: 1px solid var(--neutral-100, #f3f4f6);
}
.grms-act__list > .grms-act__row:first-child { border-top: 0; }
.grms-act__what { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.grms-act__what > a,
.grms-act__what > span:first-child { font-size: var(--text-sm, .875rem); font-weight: 500; overflow-wrap: anywhere; }
.grms-act__meta { font-size: var(--text-xs, .75rem); color: var(--neutral-500, #666666); }
.grms-act__when {
    flex-shrink: 0; text-align: right; white-space: nowrap;
    font-size: var(--text-xs, .75rem); color: var(--color-text, #1f2937);
}
/* Relative times read in Title Case on My Activity (WG-215): "Today",
   "Yesterday", "2 Days Ago", "In 7 Days". Done HERE, not in the shared `due_in`
   filter, whose lower-case output the grant pages keep; .grms-act__rel exists
   on this page only. (The table's own .grms-nyn__rel went with WG-217.) */
.grms-act__rel { display: block; color: var(--neutral-500, #666666); text-transform: capitalize; }
/* Overdue: the relative phrase carries the colour too, and is the louder half. */
.grms-act__when.lokentra-fg--danger .grms-act__rel { color: inherit; font-weight: 600; }

/* Unread notices get a dot, not a bold row: bold is already how a title reads. */
.grms-act__row--unread .grms-act__what > a::before,
.grms-act__row--unread .grms-act__what > span:first-child::before {
    content: ""; display: inline-block; width: .45rem; height: .45rem;
    border-radius: 50%; background: var(--brand-blue, #0066ff);
    margin-right: .4rem; vertical-align: middle;
}
.grms-act__warn {
    font-size: var(--text-sm, .875rem);
    color: var(--color-warning, #a16207); background: var(--color-warning-bg, #fffbeb);
    border-radius: 6px; padding: .5rem .75rem; margin: .5rem 0;
}
.grms-act__note { font-size: var(--text-xs, .75rem); color: var(--neutral-500, #666666); margin: .4rem 0 0; }
.grms-act__quiet { font-size: var(--text-sm, .875rem); color: var(--color-success, #15803d); margin: .25rem 0 0; }

/* Signatures, folded (WG-161 feedback: the open cards took up too much of the
   page). The disclosure itself is the grant page's .grms-fold -- marker reset,
   chevron, open spacing -- so only what that pattern lacks is here: the
   two-line title block, the hover that says the whole row is a control, and
   the "Open Grant" link that moved inside the card. */
.grms-act__sigs { display: flex; flex-direction: column; gap: .5rem; }
.grms-act__sig > summary { gap: 1rem; }
.grms-act__sigwhat { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.grms-act__sigtitle {
    font-size: var(--text-sm, .875rem); font-weight: 600;
    color: var(--color-text, #1f2937); overflow-wrap: anywhere;
}
.grms-act__sig > summary:hover .grms-act__sigtitle { text-decoration: underline; }
.grms-act__sig > summary:hover .grms-add-chevron { color: var(--color-text, #1f2937); }
.grms-act__sigopen {
    margin: 0 0 .5rem; text-align: right;
    font-size: var(--text-xs, .75rem); font-weight: 500;
}
.grms-act__sigopen i { margin-left: .3rem; font-size: .7em; }

/* NEEDS YOU NOW, ONE TABLE (WG-200/201). Every selector here carries
   `table.grms-nyn` because theme-lokentra.css loads AFTER this sheet: its
   `.lokentra-table thead th { text-align: left }` and `tbody td { vertical-align:
   top }` are (0,1,2), so a one-class rule here would tie and lose -- the
   WG-118/123/173 trap. (0,1,3)+ wins on specificity, not on load order.
   Text reads from the left edge; dates and day counts sit right in tabular
   figures so they compare down the column. Wide content scrolls INSIDE its own
   wrapper, never the page. */
/* position: relative is load-bearing: the header's sr-only "Action" label is
   position:absolute, and an absolute box escapes an overflow clip unless its
   containing block is INSIDE the scroller -- it stretched a 390px page to 970px. */
.grms-nyn__wrap { position: relative; overflow-x: auto; }
table.grms-nyn { min-width: 58rem; }
table.grms-nyn thead th.grms-nyn__th { padding: .6rem .75rem; vertical-align: middle; }
table.grms-nyn thead th.grms-nyn__center { text-align: center; }
table.grms-nyn thead th.grms-nyn__act { width: 1%; text-align: center; }
table.grms-nyn .grms-nyn__center .grms-nyn__sort { justify-content: center; }
table.grms-nyn .grms-nyn__sort {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
table.grms-nyn .grms-nyn__sort i { font-size: .7em; opacity: .45; width: .6rem; flex: none; text-align: center; }
/* A centred header centres its LABEL, not label + arrow (WG-230): the arrow
   pulled every label left of the values under it, most visibly over the
   narrow Ref # column. An empty box the arrow's width on the other side
   balances it. */
table.grms-nyn .grms-nyn__center .grms-nyn__sort::before { content: ""; width: .6rem; flex: none; }
table.grms-nyn .grms-nyn__sort.is-active i,
table.grms-nyn .grms-nyn__sort:hover i { opacity: 1; }
/* The row's OWN cells only: the expanded signing form is a table inside a
   form row, and a bare `table.grms-nyn tbody td` reached into it and floated
   each step's label to the middle of a tall row. */
table.grms-nyn tr.grms-nyn__row td { vertical-align: middle; font-size: var(--text-sm, .875rem); }
table.grms-nyn tbody td.grms-nyn__center { text-align: center; }
/* COLUMN DIVIDERS (WG-211): 1px, the table's own line token, so they read as the
   same family as the row separators. Between columns only -- `:first-child`
   carries none, so there is no line on the outer edge -- and only on the
   table's own header and rows: the expanded form and its nested table are not
   `tr.grms-nyn__row`, so they stay clean. */
table.grms-nyn thead th.grms-nyn__th,
table.grms-nyn tr.grms-nyn__row td { border-left: 1px solid var(--lokentra-line, #E3E8E6); }
table.grms-nyn thead th.grms-nyn__th:first-child,
table.grms-nyn tr.grms-nyn__row td:first-child { border-left: 0; }
table.grms-nyn thead th.grms-nyn__th { border-left-color: var(--lokentra-blue-200, #C0D8EA); }
table.grms-nyn tbody td.grms-nyn__left { text-align: left; }
table.grms-nyn tbody td.grms-nyn__fig { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grms-nyn tbody td.grms-nyn__ref { color: var(--lokentra-ink-3, #66716F); font-weight: 600; }
table.grms-nyn tbody td.grms-nyn__grant { min-width: 14rem; max-width: 22rem; overflow-wrap: anywhere; }
table.grms-nyn tbody td.grms-nyn__what { min-width: 12rem; }
table.grms-nyn tbody td.grms-nyn__act { text-align: center; white-space: nowrap; width: 1%; }
/* What's Due is one two-line block on every row (WG-210): the name on top in
   ONE ink colour whether or not it is a link, the kind muted underneath. */
.grms-nyn__whattext { display: block; font-weight: 500; color: var(--lokentra-ink, #1B2422); text-decoration: none; }
/* A name with nothing under it is its cell's ONLY child, and theme-buzzrfp.css's
   `#content-wrapper td > a:only-child { display: flex }` (1,1,2) -- its 44px
   tap area -- beats the block above and sends the name to the left edge
   (WG-229: every "Grant submission deadline" row). Keep the tap area, centre
   the content; the #id is what lets this rule win. */
#content-wrapper table.grms-nyn td.grms-nyn__what a.grms-nyn__whattext { justify-content: center; text-align: center; }
a.grms-nyn__whattext:hover { color: var(--lokentra-blue-700, #0C4C6C); text-decoration: underline; }
.grms-nyn__meta { display: block; font-size: var(--text-xs, .75rem); color: var(--lokentra-ink-3, #66716F); }
.grms-nyn__kind {
    display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .55rem;
    border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap;
    background: var(--lokentra-blue-50, #F2F7FB); color: var(--lokentra-blue-800, #083850);
    box-shadow: inset 0 0 0 1px var(--lokentra-blue-100, #E1EDF6);
}
.grms-nyn__kind--overdue { background: var(--color-danger-bg, #fef2f2); color: var(--color-danger, #b91c1c); box-shadow: inset 0 0 0 1px #fecaca; }
.grms-nyn__kind--escalation { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px #fde68a; }
.grms-nyn__late { color: var(--color-danger, #b91c1c); font-weight: 600; }
/* How long is left, under the deadline -- a signature inbox is read for urgency,
   not for a date (WG-157). Red once passed, like the Past Due figure beside it. */
/* One Due Date per row (WG-218). Where an item has no date of its own it
   falls back to the grant deadline, and says so underneath -- quietly, because
   it is provenance, not a second date. Lateness lives in Past Due only. */
.grms-nyn__duesrc { display: block; font-size: var(--text-xs, .75rem); color: var(--lokentra-ink-3, #66716F); }
.grms-nyn__decision {
    display: inline-flex; align-items: center; height: 1.125rem; padding: 0 .4rem; margin-left: .3rem;
    border-radius: 999px; font-size: .625rem; font-weight: 700;
    background: var(--neutral-100, #f3f4f6); color: var(--lokentra-ink-2, #3A4644);
}
.grms-nyn__decision--pursue { background: #dcfce7; color: #166534; }
.grms-nyn__decision--decline { background: #fee2e2; color: #991b1b; }
.grms-nyn__sign { gap: .35rem; }
.grms-nyn__sign .grms-nyn__chev { font-size: .7em; transition: transform .15s ease; }
.grms-nyn__sign[aria-expanded="true"] .grms-nyn__chev { transform: rotate(180deg); }
.grms-nyn__open { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-sm, .875rem); font-weight: 500; }
.grms-nyn__open i { font-size: .7em; }
/* The expanded signing form. [hidden] must be restated: an author `display`
   anywhere on this row would otherwise beat the UA's [hidden] rule. */
table.grms-nyn tbody tr.grms-nyn__form[hidden] { display: none; }
table.grms-nyn tbody tr.grms-nyn__form > td { background: var(--lokentra-blue-50, #F2F7FB); padding: .75rem 1rem 1rem; }
table.grms-nyn tbody tr.grms-nyn__form:hover { background: transparent; }
/* The expanded form's Step and State columns centre with the table around them
   (WG-209). Its Record a Decision column stays left: a warning paragraph, three
   fields and a button do not read centred. Scoped to this table, so the grant
   page's own approval chain keeps its layout; (0,3,4) beats the theme's
   (0,1,2) header rule and Tailwind's text-left alike. */
table.grms-nyn tr.grms-nyn__form table.grms-approve-table th.grms-sign__mid,
table.grms-nyn tr.grms-nyn__form table.grms-approve-table td.grms-sign__mid { text-align: center; }
@media (prefers-reduced-motion: reduce) { .grms-nyn__sign .grms-nyn__chev { transition: none; } }

/* A checklist item's due date on the grant page (WG-220): compact, at the row's end. */
.grms-cl-due { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.grms-cl-due__input { font-size: .75rem; border: 1px solid var(--lokentra-line, #E3E8E7); border-radius: .25rem; padding: .1rem .3rem; }

/* An open section with no due date (WG-221): said, in amber, where it is
   assigned -- it will not be reminded or escalated until it has one. */
.grms-assign__nodate { margin: .2rem 0 0; font-size: var(--text-xs, .75rem); color: #92400e; }

/* TYPE CHIPS above Needs You Now (WG-216). The active chip is the solid brand
   pill (the one filled thing in the row); the rest are outlined, and an empty
   type is dimmed and inert rather than hidden, so the row keeps its shape. */
.grms-nyn__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .85rem; }
.grms-nyn__chip {
    display: inline-flex; align-items: center; gap: .45rem; height: 2rem; padding: 0 .45rem 0 .8rem;
    border-radius: 999px; font-size: .8125rem; font-weight: 600; text-decoration: none;
    color: var(--lokentra-ink-2, #3A4644); background: #fff;
    box-shadow: inset 0 0 0 1px var(--lokentra-line, #E3E8E7);
    transition: box-shadow .12s ease, background-color .12s ease;
}
a.grms-nyn__chip:hover { box-shadow: inset 0 0 0 1px var(--lokentra-blue-200, #C0D8EA); background: var(--lokentra-blue-50, #F2F7FB); }
a.grms-nyn__chip:focus-visible { outline: 2px solid var(--lokentra-blue-600, #106088); outline-offset: 2px; }
.grms-nyn__chipn {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem;
    height: 1.375rem; padding: 0 .4rem; border-radius: 999px; font-size: .6875rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--lokentra-blue-50, #F2F7FB); color: var(--lokentra-blue-800, #083850);
}
.grms-nyn__chip.is-active { background: var(--lokentra-blue-600, #106088); color: #fff; box-shadow: none; }
.grms-nyn__chip.is-active .grms-nyn__chipn { background: rgb(255 255 255 / .22); color: #fff; }
.grms-nyn__chip.is-empty { opacity: .5; cursor: default; }
.grms-nyn__none { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .grms-nyn__chip { transition: none; } }

/* One pager per section (WG-199): quiet, under its own list, never wider than it. */
.grms-act__pager {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap; margin-top: .5rem; padding-top: .5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    font-size: var(--text-xs, .75rem); color: var(--neutral-500, #666666);
    font-variant-numeric: tabular-nums;
}
.grms-act__pagenav { display: inline-flex; align-items: center; gap: .5rem; }
.grms-act__pagebtn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; min-height: 2.25rem; border-radius: .375rem;
    border: 1px solid var(--color-border, #e5e7eb); color: var(--color-text, #1f2937);
}
a.grms-act__pagebtn:hover { background: var(--color-surface-muted, #f3f4f6); }
.grms-act__pagebtn.is-off { opacity: .4; }
.grms-act__sub[id], .grms-act__head[id] { scroll-margin-top: 80px; }

@media (max-width: 640px) {
    .grms-act { padding: .85rem 1rem; }
    .grms-act__sig > summary { flex-wrap: wrap; row-gap: .35rem; }
    .grms-act__row { flex-direction: column; gap: .15rem; }
    .grms-act__when { text-align: left; white-space: normal; }
    .grms-act__rel { display: inline; margin-left: .35rem; }
}

/* The signature card at phone width. WG-157's fixed three-column table is what
   keeps cards aligned down a desktop page, and at 390px it split "Changes
   Requested" into four fragments and the conflict notice into a one-word
   column. Below 640px each step stacks -- step, state, then the form.
   CSS only, so the card's markup (and every guard pinning it) is unchanged; and
   scoped to .grms-act, so the grant page's own copy of the chain is untouched. */
@media (max-width: 640px) {
    .grms-act .grms-approve-table,
    .grms-act .grms-approve-table tbody,
    .grms-act .grms-approve-table tr,
    .grms-act .grms-approve-table td { display: block; width: 100%; }
    .grms-act .grms-approve-table thead { display: none; }
    .grms-act .grms-approve-table tr { padding: .5rem 0; }
    .grms-act .grms-approve-table td { padding: .3rem 0; }
}

/* ----------------------------------------------------------------------------
   Reports register (WG-180)

   THE COUNTS SIT IN THE HEADER. They were a row of two cards, each a 540px
   white box around one number, which took ~110px above the filters and was
   mostly empty. As a line beside Awards they say the same thing in one row.

   ON THE TITLE'S CENTRE LINE. .lokentra-head__bar aligns its children to
   flex-start -- right for a page whose title has a description line under it,
   which this one no longer has -- so the 32px Awards button sat 3px high of the
   title's centre at a 16px root, and at the laptop's 14px root, where the button
   is the taller of the two, the TITLE sat high instead. Centring the bar, not
   one child, is what holds at both. Scoped to this page, so the shared rule
   stays as every other page has it.

   ON A PHONE the counts and Awards wrap to their own line (never widening the
   page), and that line sits .75rem under the title rather than the bar's 1.5rem
   column gap, which read as a section break between a title and its own counts.
   ------------------------------------------------------------------------- */
.grms-reports .lokentra-head__bar { align-items: center; row-gap: .75rem; }
.grms-reports .lokentra-head__actions { flex-wrap: wrap; row-gap: .5rem; }
.grms-reports__stats { display: flex; align-items: baseline; }
.grms-reports__stat {
    margin: 0; white-space: nowrap;
    font-size: var(--text-sm, .875rem); color: var(--neutral-500, #666666);
}
.grms-reports__stat + .grms-reports__stat {
    margin-left: .75rem; padding-left: .75rem;
    border-left: 1px solid var(--color-border, #e5e5e5);
}
.grms-reports__stat strong {
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--color-text, #1f2937);
}
/* Red on the number only: the word "Overdue" beside it already says what it is. */
.grms-reports__stat--danger strong { color: var(--color-danger, #b91c1c); }

/* THE FILTER ROW STANDS ON ONE LINE. Its controls are bottom-aligned, so each
   must be the fields' height -- and the theme's 44px touch target reaches
   inputs, selects and <button>s but not a <label> or an <a>. Without this the
   "Overdue only" box was 30px and Clear 32px, each sitting low of the row. */
/* A filter checkbox with its label. `.grms-check` is the name every page uses;
   `.grms-reports__check` is what the Reports page called it first and still
   carries, on the same rule rather than a second one -- one control with two
   rules is how two controls that look alike start behaving differently. */
.grms-check,
.grms-reports__check,
.grms-reports form a.grms-btn { min-height: 44px; }
.grms-check,
.grms-reports__check { display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; }

/* ---------------------------------------------------------------------------
   Awards register: the title link does not become a tap box (WG-381)

   theme-buzzrfp.css:1786 gives `#content-wrapper td > a:only-child` a 44px flex
   box, the API-1264 tap area. The Awards title cell's Board gavel and acceptance
   padlock are CONDITIONAL, so the link is the cell's only child on exactly the
   rows needing neither -- and those rows alone would stand ~24px taller than
   their neighbours, for no reason a reader could see. The same defect WG-229
   fixed on My Activity.

   (1,2,3) beats the theme's (1,1,2), so this wins on specificity and not on
   which sheet loads second. `display: inline` also neutralises the min-height:
   it does not apply to a non-replaced inline box.
   --------------------------------------------------------------------------- */
#content-wrapper table.lokentra-table td a.grms-awards__title { display: inline; }

/* ==========================================================================
   WG-435: the v5 top-bar identity (WETCC only; see includes/user_menu.html).
   Initials avatar + name + role, as the v5 design draws it. Sizes keep the
   console's 12px readability floor (API-1263) rather than the mock's 11px.
   ========================================================================== */
.grms-v5-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    border: 0;
    border-left: 1px solid #e4e8ee;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.grms-v5-user:hover .grms-v5-user__name { color: var(--lokentra-blue-800, #00574b); }
.grms-v5-user:focus-visible { outline: 2px solid var(--lokentra-blue-600, #368727); outline-offset: 2px; border-radius: 0.5rem; }
.grms-v5-user__avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #00574b;
    color: #fff;
    font-size: max(0.75rem, 12px);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.grms-v5-user__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.grms-v5-user__name {
    font-size: max(0.8125rem, 13px);
    font-weight: 700;
    color: #15202e;
    white-space: nowrap;
}
.grms-v5-user__role {
    max-width: 14rem;
    overflow: hidden;
    font-size: max(0.75rem, 12px);
    color: #6b7788;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.grms-v5-user__roles { margin-top: 0.25rem; font-size: max(0.75rem, 12px); color: #3a4656; }

/* ---------------------------------------------------------------------------
   GRANTS REPORT v2 — table restyle
   Design: Monika, project "Overview dashboard refinement",
   `GRMS Grants Report v2.dc.html` (COLS / STATUS / GROUP_COLOR in its source).

   RESTYLE ONLY. The design's ten columns are the ten this register already
   has, in the same order, so GRANTS_REPORT_COLUMNS, the <colgroup> and the
   <td> cells are untouched and test_grms_report_columns.py still holds.

   SCOPED TO `.grms-report-table`, which only grants_report.html carries. The
   Grants list uses `.grms-register-table` alone and is deliberately left as
   it is — these two pages are not being restyled together.

   SPECIFICITY, not source order. theme-lokentra.css loads AFTER this file
   (_base_grms.html, below base.html), so `.lokentra-table thead th` (0,1,2)
   beats any (0,1,2) rule written here however late. Every rule below is
   `table.grms-report-table …` (0,1,3) for that reason — the same defence the
   `.grms-register-table` block above already documents.

   The accent is var(--lokentra-blue-700/800), NOT the design's literal
   #00574b. That hex is WETCC's green as the design tool resolved it; the
   console re-tones the brand ramp per tenant, so hard-coding it would paint
   every other tenant's report green.
   --------------------------------------------------------------------------- */

table.grms-report-table thead th {
  background: #f7f9fb;
  border-bottom: 1px solid #e9edf2;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lokentra-ink-3);
}
table.grms-report-table thead th a { color: inherit; text-decoration: none; }
table.grms-report-table thead th a:hover { color: var(--lokentra-blue-700); }
table.grms-report-table thead th .grms-sort-icon { font-size: 11px; color: #9aa5b4; }
table.grms-report-table thead th[aria-sort] .grms-sort-icon {
  color: var(--lokentra-blue-700);
  opacity: 1;
}

table.grms-report-table tbody tr { border-bottom: 1px solid #eef1f5; }
table.grms-report-table tbody tr:hover { background: #f7f9fb; }
table.grms-report-table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 12.5px;
  color: var(--lokentra-ink);
}

/* Numerals line up column-wise: a register is read down, not across. */
table.grms-report-table .grms-rep-num { font-variant-numeric: tabular-nums; }

/* Grant title — one line, ellipsis, full text in the cell's title attribute. */
table.grms-report-table .grms-rep-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--lokentra-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.grms-report-table tbody tr:hover .grms-rep-title { color: var(--lokentra-blue-700); }

/* Funder over its category — the Category COLUMN was removed from this
   register on 2026-09-11 and only its filter kept; the design brings the value
   back as a second line here, which costs no width and no new field (category
   is already on GrantListItem). */
table.grms-report-table .grms-rep-funder {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.grms-report-table .grms-rep-cat {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #6b7788;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Workflow stage: a dot carrying the stage GROUP, then the label. Colour is
   never the only signal — the label is always beside it. */
table.grms-report-table .grms-rep-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  flex: none;
}
.grms-rep-dot--pre { background: #2f86a6; }
.grms-rep-dot--sub { background: #5b6fd6; }
.grms-rep-dot--awarded { background: #2E7D32; }
.grms-rep-dot--declined { background: #e5484d; }

/* The stage sits on ONE line. "Grant identification" wraps at this column's
   width and takes every row to two lines with it, which is what made the live
   register taller than the design; the full label stays reachable because the
   cell is narrow by design, not truncated by accident. */
table.grms-report-table .grms-rep-stage {
  display: flex;
  align-items: center;
  min-width: 0;
}
table.grms-report-table .grms-rep-stage > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Not named" / "Unassigned" are absences, so they read as absences. */
table.grms-report-table .grms-rep-none {
  font-style: italic;
  color: #9aa5b4;
}

table.grms-report-table .grms-rep-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--lokentra-blue-50);
  color: var(--lokentra-blue-800);
}

/* Deadline-status pills. Report-scoped on purpose: WG-190 put report tones
   behind their own kind so no other badge in the console changes colour. */
table.grms-report-table .grms-dlpill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.grms-dlpill--overdue { background: #fdecec; color: #c9353a; }
.grms-dlpill--near    { background: #fff1e3; color: #b85c0a; }
.grms-dlpill--active  { background: #e6f3f7; color: var(--lokentra-blue-800); }
.grms-dlpill--funder  { background: #eef0fb; color: #4a5bc4; }
.grms-dlpill--none    { background: #f2f4f7; color: #6b7788; }

/* ---------------------------------------------------------------------------
   GRANTS REPORT v2 — tab strip
   Replaces the "Deadline status" dropdown with the design's tabs. Same
   `?deadline=` parameter underneath, so every existing link into this page
   (the dashboard tiles especially) still lands on the right tab.
   --------------------------------------------------------------------------- */
.gr-tabs {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid #e4e8ee;
  margin-bottom: 14px;
}
.gr-tabs::-webkit-scrollbar { display: none; }

.gr-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 0 14px;
  height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lokentra-ink-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.gr-tab:hover { color: var(--lokentra-ink); background: #f7f9fb; }

/* The active tab is marked by WEIGHT AND A RULE, not colour alone: the dot
   beside each label already carries the bucket's colour, so colour here would
   be saying two things at once. */
.gr-tab.is-active {
  color: var(--lokentra-blue-800);
  border-bottom-color: var(--lokentra-blue-700);
  font-weight: 700;
}

.gr-tab__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.gr-tab__dot--overdue     { background: #e5484d; }
.gr-tab__dot--near        { background: #f5a623; }
.gr-tab__dot--active      { background: #2f86a6; }
.gr-tab__dot--with_funder { background: #5b6fd6; }
.gr-tab__dot--none        { background: #9aa5b4; }

/* ---------------------------------------------------------------------------
   GRANTS REPORT v2 — tabs row, search, and the single filter row
   --------------------------------------------------------------------------- */
.gr-tabrow {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 1px solid #e4e8ee;
  margin-bottom: 14px;
}
.gr-tabrow .gr-tabs { border-bottom: 0; margin-bottom: 0; flex: 1 1 auto; min-width: 0; }

.gr-search { position: relative; flex: 0 1 340px; margin-bottom: 8px; }
.gr-search__icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #8a95a5;
  pointer-events: none;
}
.gr-search__input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 32px;
  font-size: 13px;
  border: 1px solid #e4e8ee;
  border-radius: 9px;
  background: #f2f4f7;
}
.gr-search__input:focus {
  outline: 2px solid var(--lokentra-blue-700);
  outline-offset: -1px;
  background: #fff;
}

/* One row, wrapping only when it must. Every control is 36px so the row has a
   single baseline -- the old card mixed 30px inputs with 44px buttons. */
.gr-filterrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.gr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gr-field > label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lokentra-ink-3);
}
.gr-field > select,
.gr-field > input {
  height: 36px;
  min-width: 150px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid #e4e8ee;
  border-radius: 9px;
  background: #fff;
  color: var(--lokentra-ink);
}
.gr-field > select:focus,
.gr-field > input:focus {
  outline: 2px solid var(--lokentra-blue-700);
  outline-offset: -1px;
}
.gr-filterrow .gr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* "Clear all" is destructive-ish and the design marks it in red as a LINK, not
   a button: it removes filters, it does not run anything. */
.gr-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #c9353a;
  white-space: nowrap;
}
.gr-clear:hover { color: #a82a2e; text-decoration: underline; }

/* Rows-per-page sits with the pager now, not behind a disclosure. */
.gr-footer-size { display: inline-flex; align-items: center; gap: 8px; }
.gr-footer-size select {
  height: 32px;
  padding: 0 8px;
  font-size: 12.5px;
  border: 1px solid #e4e8ee;
  border-radius: 8px;
  background: #fff;
}

/* ---------------------------------------------------------------------------
   GRANTS LIST v2 — one card, tabs inside it, menus, zebra rows
   Design: Monika, `GRMS Grants.dc.html`. The list and the Report are styled to
   their OWN designs: the list stripes its rows and keeps the tabs inside the
   card, the Report does neither. That is the designer's call, not an oversight.
   --------------------------------------------------------------------------- */

/* The whole register — tabs, toolbar, table, pager — on one surface. */
.gl-card {
  background: #fff;
  border: 1px solid #e4e8ee;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gl-card > .gr-tabs {
  border-bottom: 1px solid #e4e8ee;
  margin-bottom: 0;
  padding: 0 16px;
  gap: 20px;
}
.gl-card > .gr-tabs .gr-tab { padding: 0; height: 46px; }

.gl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e8ee;
}
.gl-toolbar .gr-search { flex: 2 1 280px; margin-bottom: 0; }
.gl-toolbar .gr-search__input { height: 34px; background: #fff; border-color: #d8dee6; }

/* Zebra. The list is read ACROSS — ref to deadline — where the Report is read
   down a column, so the design stripes this one and not that one. */
.gl-card tbody tr:nth-child(even) { background: #f8fafc; }
.gl-card tbody tr:hover { background: #eef5f8; }

.gl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  color: var(--lokentra-ink-3);
  font-size: 13px;
}
.gl-empty__icon { font-size: 26px; color: #9aa5b4; }

.gl-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  flex-wrap: wrap;
}

/* Segmented range control: Last 6 months | All time */
.gl-seg { display: inline-flex; height: 36px; padding: 3px; border-radius: 9px; background: #e7ebf0; gap: 2px; }
.gl-seg a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lokentra-ink-2);
  white-space: nowrap;
}
.gl-seg a.is-on {
  background: #fff;
  box-shadow: 0 1px 2px rgba(21, 32, 46, .12);
  color: var(--lokentra-ink);
  font-weight: 700;
}

/* Menus (Import, Add a grant, Category, Status) */
.gr-menu { position: relative; display: inline-flex; }
.gr-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(21, 32, 46, .14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gr-menu__panel--left { right: auto; left: 0; }
.gr-menu__eyebrow {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8a95a5;
}
.gr-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--lokentra-ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.gr-menu__item:hover { background: #f4f6f9; }
.gr-menu__item.is-on { background: #eef5f8; font-weight: 700; }
.gr-menu__item .gr-menu__sub { display: block; font-size: 11.5px; font-weight: 400; color: #6b7788; }
.gr-menu__item .gr-menu__count { margin-left: auto; font-size: 12px; color: #8a95a5; font-variant-numeric: tabular-nums; }
.gr-menu__icon {
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  background: #e6f3f7;
  color: var(--lokentra-blue-800);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

/* Numbered pager */
.gl-pager { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.gl-pager a, .gl-pager span.is-page {
  min-width: 30px; height: 30px;
  padding: 0 8px;
  border: 1px solid #d8dee6;
  border-radius: 7px;
  background: #fff;
  color: var(--lokentra-ink-2);
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.gl-pager a:hover { background: #f2f4f7; }
.gl-pager span.is-page {
  background: var(--lokentra-blue-800);
  border-color: var(--lokentra-blue-800);
  color: #fff;
}
.gl-pager .is-disabled { opacity: .4; pointer-events: none; }

/* The design's filter row carries no visible labels — each control names itself
   through its own first option or placeholder. The <label>s stay in the markup
   as .sr-only: a date input in particular announces nothing useful without one. */
.gr-filterrow .gr-field > label.sr-only + select,
.gr-filterrow .gr-field > label.sr-only + input { margin-top: 0; }
.gr-filterrow .gr-field > select,
.gr-filterrow .gr-field > input[type="date"] { min-width: 165px; }

/* Search sits white and bordered on the tabs row, as the design draws it. */
.gr-tabrow .gr-search__input { background: #fff; border-color: #d8dee6; }

/* ---------------------------------------------------------------------------
   GRANTS REPORT v2 — the single container, and the zebra the design does have
   Corrects an earlier reading of mine: I grepped the Report's source for the
   LIST's `rowBg` variable, found none and concluded the Report had no stripes.
   It sets them inline instead —  `i % 2 ? '#f8fafc' : '#ffffff'`  — so both
   registers stripe, and they stripe the same two values.
   --------------------------------------------------------------------------- */
.gl-card--report > .gr-tabrow {
  margin-bottom: 0;
  padding: 0 16px;
  border-bottom: 1px solid #e4e8ee;
}
.gl-card--report > .gr-tabrow .gr-tabs { border-bottom: 0; }
.gl-card--report > .gl-toolbar { border-bottom: 1px solid #e4e8ee; }

/* The table sits flush inside the container: its own rounding and shadow are
   gone, so the container's single border is the only edge on the page. */
.gl-card--report > .overflow-x-auto { border-radius: 0; }

table.grms-report-table tbody tr:nth-child(even) { background: #f8fafc; }
table.grms-report-table tbody tr { min-height: 58px; }
table.grms-report-table tbody td { padding-top: 12px; padding-bottom: 12px; }
/* Hover has to beat the zebra, so it is written after it and at the same weight. */
table.grms-report-table tbody tr:hover,
table.grms-report-table tbody tr:nth-child(even):hover { background: #eef5f8; }

/* The report's footer sits inside the container, so it gets the container's own
   padding rather than the page's. The pager group is pushed right by its own
   margin-left:auto (.gl-pager), not by justify-between on the row — which is
   what spread the numbered buttons across the whole footer. */
.gl-card--report > .gl-foot,
.gl-card--report > div:last-child { padding: 10px 16px; }
.gl-pager i { font-size: 11px; }

/* ---------------------------------------------------------------------------
   GRANTS REPORT v2 — control sizing
   The design puts every control on ONE scale: 36px tall, 9px radius, 13px text
   (its §1 "Buttons and inputs"). Measured before this rule: All Grants and
   Export CSV were 48px at 16px text, Apply 44px, and the selects and the search
   box 44px — my own `height:36px` lost to the theme's `min-height:44px` touch
   floor, which is a MINIMUM and so beats a plain height.
   Set here with `min-height` as well as `height`, and scoped to this page's two
   control groups so the 44px floor still governs every other console.
   36px clears WCAG 2.5.8's 24px target minimum with room to spare.
   --------------------------------------------------------------------------- */
.grms-page .lokentra-head__actions .grms-btn,
#gr-filters .gr-actions .grms-btn {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.grms-page .lokentra-head__actions .grms-btn i,
#gr-filters .gr-actions .grms-btn i { font-size: 13px; }

#gr-filters .gr-field > select,
#gr-filters .gr-field > input {
  height: 36px;
  min-height: 36px;
  border-radius: 9px;
  font-size: 13px;
}
.gr-tabrow .gr-search .gr-search__input {
  height: 36px;
  min-height: 36px;
  border-radius: 9px;
  font-size: 13px;
}
#gr-filters .gr-clear { height: 36px; min-height: 36px; }

/* The search box loses to a `#content-wrapper input` 44px floor (1,0,1), which
   a class-only rule cannot reach. Matched at (2,0,1) rather than raising the
   floor for every input in the console. */
#content-wrapper input#gr-keyword.gr-search__input {
  height: 36px;
  min-height: 36px;
}

/* Apply is a <button>, and theme-buzzrfp's touch floor targets buttons by TYPE:
   `#content-wrapper button:not(.btn-sm):not(.ms-summary)` is (1,2,1). My rule
   above, `#gr-filters .gr-actions .grms-btn`, is (1,2,0) — one point short,
   because it names no element. Matching it at (1,2,1) ties, and a tie goes to
   this sheet, which loads after theme-buzzrfp. */
#gr-filters .gr-actions button.grms-btn { height: 36px; min-height: 36px; }

/* Same arithmetic for the date inputs: `#content-wrapper input:not(×4)` counts
   each :not() argument, so it is (1,4,1). Matched with the same four :not()s
   and the form's id, which takes it to (2,4,1). */
#content-wrapper #gr-filters input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) {
  height: 36px;
  min-height: 36px;
}

/* The search box sat hard against the container's top border (your crop): the
   tab row aligned to its BOTTOM edge to keep the tab underline on the rule,
   which left the taller search box no room above it. Centred instead, with the
   row given its own vertical breathing room; the tabs keep their underline
   because the rule now sits on the row, not on the tabs. */
.gl-card--report > .gr-tabrow { align-items: center; min-height: 58px; }
.gl-card--report > .gr-tabrow .gr-search { margin: 0; }
.gl-card--report > .gr-tabrow .gr-tab { height: 58px; }

/* ===========================================================================
   GRANTS LIST v3 — Monika's `GRMS Grants.dc.html`, value for value.

   SCOPED TO #grms-grants-page, AND TO #grms-awards-page: the Awards register
   (Monika's `GRMS Awards.dc.html`) is drawn from the same components -- card,
   toolbar, dropdowns, table, footer, toasts -- so each rule names both pages in
   one selector list rather than living twice. Its own pieces (the record form,
   the Funders card, the award cells) are the aw-* block further down.

   Two ids out-rank the theme's touch-target floors
   (`#content-wrapper button:not(.btn-sm):not(.ms-summary)` is (1,2,1),
   `#content-wrapper input:not(×4)` is (1,4,1)) and grms-v5.css's shared control
   rules, whatever order the sheets load in. Colours read the v5 tokens
   (--grms-*) with the design's own values as fallbacks, and the brand ramp for
   the accent (--lokentra-blue-600 IS the design's #00574b under grms-v5.css),
   so WETCC paints the design and every other tenant its own brand.
   =========================================================================== */
#content-wrapper #grms-grants-page,
#content-wrapper #grms-awards-page {
  --gl-primary: var(--lokentra-blue-600, #00574b);
  --gl-primary-hover: var(--lokentra-blue-700, #00443a);
  --gl-text: var(--grms-text, #15202e);
  --gl-text-2: var(--grms-text-2, #3a4656);
  --gl-text-3: var(--grms-text-3, #5a6676);
  --gl-muted: var(--grms-muted, #6b7788);
  --gl-subtle: var(--grms-subtle, #8a95a5);
  --gl-disabled: var(--grms-disabled, #9aa5b4);
  --gl-border: var(--grms-border, #e4e8ee);
  --gl-border-input: var(--grms-border-input, #d8dee6);
  --gl-border-hover: var(--grms-border-input-hover, #b9c3cf);
  --gl-focus: var(--grms-focus-border, #2f86a6);
  --gl-ring: 0 0 0 3px rgba(47, 134, 166, 0.15);
  --gl-head-bg: var(--grms-table-head, #eef2f6);
  --gl-zebra: var(--grms-surface-alt, #f8fafc);
  --gl-hover: var(--grms-row-hover, #eef5f8);
  --gl-divider: var(--grms-divider, #edf0f4);
  --gl-menu-shadow: 0 12px 32px rgba(21, 32, 46, 0.14);
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* The design stacks crumb, title and meta 4px apart; the shared breadcrumb
     leaves 8px under itself, so this page alone takes 4px of it back. */
  margin-top: -4px;
  padding: 0 0 24px;
  color: var(--gl-text);
}

/* Every panel opens and closes through `hidden`; an author `display` would
   otherwise beat the UA's [hidden] rule and leave them open (the WG-122 lesson). */
#content-wrapper #grms-grants-page [hidden],
#content-wrapper #grms-awards-page [hidden] { display: none !important; }

/* Icons: Material Symbols at the design's sizes. */
#content-wrapper #grms-grants-page .gl-ic,
#content-wrapper #grms-awards-page .gl-ic { font-size: 18px; line-height: 1; flex: none; }
#content-wrapper #grms-grants-page .gl-ic--14,
#content-wrapper #grms-awards-page .gl-ic--14 { font-size: 14px; }
#content-wrapper #grms-grants-page .gl-ic--15,
#content-wrapper #grms-awards-page .gl-ic--15 { font-size: 15px; }
#content-wrapper #grms-grants-page .gl-ic--16,
#content-wrapper #grms-awards-page .gl-ic--16 { font-size: 16px; }
#content-wrapper #grms-grants-page .gl-ic--17,
#content-wrapper #grms-awards-page .gl-ic--17 { font-size: 17px; }

/* ---- Page header ---------------------------------------------------------- */
#content-wrapper #grms-grants-page .gl-head,
#content-wrapper #grms-awards-page .gl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
#content-wrapper #grms-grants-page .gl-head__text,
#content-wrapper #grms-awards-page .gl-head__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* theme-buzzrfp.css sizes every #content-wrapper h1 with !important (31px at
   >= 1440px), so the design's 24px needs the same weight to land. */
html body #content-wrapper #grms-grants-page h1.gl-head__title,
html body #content-wrapper #grms-awards-page h1.gl-head__title {
  margin: 0;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--gl-text);
}
#content-wrapper #grms-grants-page .gl-head__meta,
#content-wrapper #grms-awards-page .gl-head__meta { margin: 0; font-size: 13px; color: var(--gl-text-3); }
#content-wrapper #grms-grants-page .gl-head__actions,
#content-wrapper #grms-awards-page .gl-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#content-wrapper #grms-grants-page .gl-seg-slot:empty,
#content-wrapper #grms-awards-page .gl-seg-slot:empty { display: none; }

#content-wrapper #grms-grants-page .gl-seg a,
#content-wrapper #grms-awards-page .gl-seg a { color: var(--gl-text-3); font-weight: 600; }
#content-wrapper #grms-grants-page .gl-seg a.is-on,
#content-wrapper #grms-awards-page .gl-seg a.is-on { color: var(--gl-text); font-weight: 700; }
#content-wrapper #grms-grants-page .gl-seg a:not(.is-on):hover,
#content-wrapper #grms-awards-page .gl-seg a:not(.is-on):hover { color: var(--gl-text); }

/* ---- Buttons (header triggers, panel actions) ----------------------------- */
html body #content-wrapper #grms-grants-page .gl-btn,
html body #content-wrapper #grms-awards-page .gl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  padding: 0 8px 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
html body #content-wrapper #grms-grants-page .gl-btn--outline,
html body #content-wrapper #grms-awards-page .gl-btn--outline {
  background: #fff;
  border-color: var(--gl-border-input);
  color: var(--gl-text);
}
html body #content-wrapper #grms-grants-page .gl-btn--outline:hover,
html body #content-wrapper #grms-awards-page .gl-btn--outline:hover { background: #f6f8fa; }
html body #content-wrapper #grms-grants-page .gl-menu.is-open > .gl-btn--outline,
html body #content-wrapper #grms-awards-page .gl-menu.is-open > .gl-btn--outline { border-color: var(--gl-focus); }
html body #content-wrapper #grms-grants-page .gl-btn--primary,
html body #content-wrapper #grms-awards-page .gl-btn--primary {
  background: var(--gl-primary);
  color: #fff;
  font-weight: 700;
  padding: 0 10px 0 12px;
}
html body #content-wrapper #grms-grants-page .gl-btn--primary:hover,
html body #content-wrapper #grms-awards-page .gl-btn--primary:hover { background: var(--gl-primary-hover); color: #fff; }
html body #content-wrapper #grms-grants-page .gl-btn:focus-visible,
html body #content-wrapper #grms-awards-page .gl-btn:focus-visible {
  outline: none;
  box-shadow: var(--gl-ring);
  border-color: var(--gl-focus);
}
html body #content-wrapper #grms-grants-page .gl-btn--sm,
html body #content-wrapper #grms-awards-page .gl-btn--sm {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
}
html body #content-wrapper #grms-grants-page .gl-btn--block,
html body #content-wrapper #grms-awards-page .gl-btn--block { width: 100%; justify-content: center; }
html body #content-wrapper #grms-grants-page .gl-btn--import,
html body #content-wrapper #grms-awards-page .gl-btn--import {
  margin-top: 4px;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
}
#content-wrapper #grms-grants-page .gl-btn__sub,
#content-wrapper #grms-awards-page .gl-btn__sub { font-weight: 500; color: var(--gl-muted); }
#content-wrapper #grms-grants-page .gl-btn__caret,
#content-wrapper #grms-awards-page .gl-btn__caret { color: var(--gl-muted); }
#content-wrapper #grms-grants-page .gl-btn__caret--light,
#content-wrapper #grms-awards-page .gl-btn__caret--light { color: rgba(255, 255, 255, 0.8); }
#content-wrapper #grms-grants-page .gl-btn__count,
#content-wrapper #grms-awards-page .gl-btn__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e7ebf0;
  color: var(--gl-text-2);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Header menus: the panel chrome every menu on the page shares --------- */
#content-wrapper #grms-grants-page .gl-panel,
#content-wrapper #grms-awards-page .gl-panel {
  position: absolute;
  top: 42px;
  right: 0;
  left: auto;
  z-index: 21;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  box-shadow: var(--gl-menu-shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#content-wrapper #grms-grants-page .gl-panel--import,
#content-wrapper #grms-awards-page .gl-panel--import { width: 310px; }
/* The design's 260px holds "Import from TEA or TCA"; this tenant's sub-line also
   names Grants.gov, so the panel grows to its longest line rather than wrap it. */
#content-wrapper #grms-grants-page .gl-panel--add,
#content-wrapper #grms-awards-page .gl-panel--add { width: max-content; min-width: 260px; max-width: 340px; }
#content-wrapper #grms-grants-page .gl-panel--add .gl-addopt__text span,
#content-wrapper #grms-awards-page .gl-panel--add .gl-addopt__text span { white-space: nowrap; }
#content-wrapper #grms-grants-page .gl-panel--saved,
#content-wrapper #grms-awards-page .gl-panel--saved { width: 320px; }
#content-wrapper #grms-grants-page .gl-panel__form,
#content-wrapper #grms-awards-page .gl-panel__form { display: flex; flex-direction: column; gap: 2px; margin: 0; }

/* Import: one portal per row, the chosen one tinted and ticked. The radio stays
   in the form (it is what posts `source`) and is drawn by the row instead. */
#content-wrapper #grms-grants-page .gl-opt,
#content-wrapper #grms-awards-page .gl-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gl-text);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
#content-wrapper #grms-grants-page .gl-opt:hover,
#content-wrapper #grms-awards-page .gl-opt:hover { background: #f4f6f9; }
#content-wrapper #grms-grants-page .gl-opt > input[type="radio"],
#content-wrapper #grms-awards-page .gl-opt > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
#content-wrapper #grms-grants-page .gl-opt__lead,
#content-wrapper #grms-awards-page .gl-opt__lead { color: var(--gl-primary); }
#content-wrapper #grms-grants-page .gl-opt__label,
#content-wrapper #grms-awards-page .gl-opt__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#content-wrapper #grms-grants-page .gl-opt__check,
#content-wrapper #grms-awards-page .gl-opt__check { width: 16px; color: var(--gl-primary); visibility: hidden; }
#content-wrapper #grms-grants-page .gl-opt:has(> input:checked),
#content-wrapper #grms-awards-page .gl-opt:has(> input:checked) { background: #eef5f8; font-weight: 700; }
#content-wrapper #grms-grants-page .gl-opt > input:checked ~ .gl-opt__check,
#content-wrapper #grms-awards-page .gl-opt > input:checked ~ .gl-opt__check { visibility: visible; }
#content-wrapper #grms-grants-page .gl-opt:has(> input:focus-visible),
#content-wrapper #grms-awards-page .gl-opt:has(> input:focus-visible) { box-shadow: var(--gl-ring); }

/* Add a grant: an icon tile, a label and a sub-line per way in. */
#content-wrapper #grms-grants-page .gl-addopt,
#content-wrapper #grms-awards-page .gl-addopt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--gl-text);
  text-decoration: none;
}
#content-wrapper #grms-grants-page .gl-addopt:hover,
#content-wrapper #grms-awards-page .gl-addopt:hover { background: #f4f6f9; color: var(--gl-text); }
#content-wrapper #grms-grants-page .gl-addopt__tile,
#content-wrapper #grms-awards-page .gl-addopt__tile {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: #e6f3f7;
  color: var(--gl-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
#content-wrapper #grms-grants-page .gl-addopt__text,
#content-wrapper #grms-awards-page .gl-addopt__text { display: flex; flex-direction: column; gap: 1px; }
#content-wrapper #grms-grants-page .gl-addopt__text strong,
#content-wrapper #grms-awards-page .gl-addopt__text strong { font-size: 13px; font-weight: 700; }
#content-wrapper #grms-grants-page .gl-addopt__text span,
#content-wrapper #grms-awards-page .gl-addopt__text span { font-size: 11.5px; color: var(--gl-muted); }

/* Saved views. */
#content-wrapper #grms-grants-page .gl-saved,
#content-wrapper #grms-awards-page .gl-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border-radius: 8px;
}
#content-wrapper #grms-grants-page .gl-saved:hover,
#content-wrapper #grms-awards-page .gl-saved:hover { background: #f4f6f9; }
#content-wrapper #grms-grants-page .gl-saved .grms-saved__name,
#content-wrapper #grms-awards-page .gl-saved .grms-saved__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--gl-text);
  text-decoration: none;
}
#content-wrapper #grms-grants-page .gl-saved .grms-saved__name:hover,
#content-wrapper #grms-awards-page .gl-saved .grms-saved__name:hover { color: var(--gl-primary); }
#content-wrapper #grms-grants-page .gl-saved__alert,
#content-wrapper #grms-awards-page .gl-saved__alert { font-size: 11.5px; color: var(--gl-disabled); white-space: nowrap; }
#content-wrapper #grms-grants-page .gl-saved__alert.is-on,
#content-wrapper #grms-awards-page .gl-saved__alert.is-on { color: #b85c0a; font-weight: 600; }
html body #content-wrapper #grms-grants-page .gl-saved__x,
html body #content-wrapper #grms-awards-page .gl-saved__x {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--gl-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html body #content-wrapper #grms-grants-page .gl-saved__x:hover,
html body #content-wrapper #grms-awards-page .gl-saved__x:hover { background: #fdecec; color: #c9353a; }
#content-wrapper #grms-grants-page .gl-saved__empty,
#content-wrapper #grms-awards-page .gl-saved__empty { margin: 0; padding: 4px 10px 8px; font-size: 12.5px; color: var(--gl-muted); }
#content-wrapper #grms-grants-page .gl-saveform,
#content-wrapper #grms-awards-page .gl-saveform {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 10px 6px 4px;
  border-top: 1px solid var(--gl-divider);
}
#content-wrapper #grms-grants-page .gl-saveform__row,
#content-wrapper #grms-awards-page .gl-saveform__row { display: flex; align-items: center; gap: 8px; }
#content-wrapper #grms-grants-page .gl-saveform__row .gl-btn,
#content-wrapper #grms-awards-page .gl-saveform__row .gl-btn { margin-left: auto; }
#content-wrapper #grms-grants-page .gl-saveform__unit,
#content-wrapper #grms-awards-page .gl-saveform__unit { font-size: 12.5px; color: var(--gl-muted); }
#content-wrapper #grms-grants-page .gl-runalerts,
#content-wrapper #grms-awards-page .gl-runalerts { margin: 6px 6px 2px; }
html body #content-wrapper #grms-grants-page input.gl-input,
html body #content-wrapper #grms-awards-page input.gl-input {
  height: 34px;
  min-height: 34px;
  width: 100%;
  padding: 0 11px;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  color: var(--gl-text);
  box-shadow: none;
}
html body #content-wrapper #grms-grants-page input.gl-input--days,
html body #content-wrapper #grms-awards-page input.gl-input--days {
  width: 64px;
  padding: 0 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html body #content-wrapper #grms-grants-page input.gl-input:focus,
html body #content-wrapper #grms-awards-page input.gl-input:focus {
  outline: none;
  border-color: var(--gl-focus);
  box-shadow: var(--gl-ring);
}

/* The design's checkbox: a 16px box, filled with the accent and ticked when on. */
#content-wrapper #grms-grants-page .gl-chk,
#content-wrapper #grms-awards-page .gl-chk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gl-text);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
#content-wrapper #grms-grants-page .gl-chk > input[type="checkbox"],
#content-wrapper #grms-awards-page .gl-chk > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
#content-wrapper #grms-grants-page .gl-chk__box,
#content-wrapper #grms-awards-page .gl-chk__box {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid #c3ccd6;
  border-radius: 4px;
  background: #fff;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#content-wrapper #grms-grants-page .gl-chk__box .gl-ic,
#content-wrapper #grms-awards-page .gl-chk__box .gl-ic { visibility: hidden; }
#content-wrapper #grms-grants-page .gl-chk > input:checked + .gl-chk__box,
#content-wrapper #grms-awards-page .gl-chk > input:checked + .gl-chk__box { background: var(--gl-primary); border-color: var(--gl-primary); }
#content-wrapper #grms-grants-page .gl-chk > input:checked + .gl-chk__box .gl-ic,
#content-wrapper #grms-awards-page .gl-chk > input:checked + .gl-chk__box .gl-ic { visibility: visible; }
#content-wrapper #grms-grants-page .gl-chk > input:focus-visible + .gl-chk__box,
#content-wrapper #grms-awards-page .gl-chk > input:focus-visible + .gl-chk__box { box-shadow: var(--gl-ring); }
/* In the toolbar it stands as a field of its own, at the toolbar's height. */
#content-wrapper #grms-grants-page .gl-chk--field,
#content-wrapper #grms-awards-page .gl-chk--field {
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
}
#content-wrapper #grms-grants-page .gl-chk--field:hover,
#content-wrapper #grms-awards-page .gl-chk--field:hover { border-color: var(--gl-border-hover); }

/* ---- The card --------------------------------------------------------------- */
#content-wrapper #grms-grants-page .gl-card,
#content-wrapper #grms-awards-page .gl-card {
  background: #fff;
  border: 1px solid var(--gl-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: visible;      /* the toolbar's menus open past the card's edge */
}
#content-wrapper #grms-grants-page .gl-tabs,
#content-wrapper #grms-awards-page .gl-tabs {
  display: flex;
  align-items: stretch;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 16px;
  margin: 0;
  border-bottom: 1px solid var(--gl-border);
}
#content-wrapper #grms-grants-page .gl-tabs .gr-tab,
#content-wrapper #grms-awards-page .gl-tabs .gr-tab {
  flex: none;
  height: 46px;
  padding: 0;
  margin-bottom: -1px;
  gap: 7px;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--gl-muted);
}
#content-wrapper #grms-grants-page .gl-tabs .gr-tab:hover,
#content-wrapper #grms-awards-page .gl-tabs .gr-tab:hover { color: var(--gl-text); background: none; }
#content-wrapper #grms-grants-page .gl-tabs .gr-tab.is-active,
#content-wrapper #grms-awards-page .gl-tabs .gr-tab.is-active {
  border-bottom-color: var(--gl-primary);
  font-weight: 700;
  color: var(--gl-text);
}

/* ---- Toolbar ---------------------------------------------------------------- */
#content-wrapper #grms-grants-page .gl-toolbar,
#content-wrapper #grms-awards-page .gl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gl-border);
  position: relative;
  z-index: 3;
  margin: 0;
}
#content-wrapper #grms-grants-page .gl-search,
#content-wrapper #grms-awards-page .gl-search {
  flex: 2 1 280px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background: #fff;
  color: var(--gl-muted);
  margin: 0;
  cursor: text;
}
#content-wrapper #grms-grants-page .gl-search:focus-within,
#content-wrapper #grms-awards-page .gl-search:focus-within { border-color: var(--gl-focus); box-shadow: var(--gl-ring); }
html body #content-wrapper #grms-grants-page input.gl-search__input,
html body #content-wrapper #grms-awards-page input.gl-search__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--gl-text);
}
html body #content-wrapper #grms-grants-page input.gl-search__input:focus,
html body #content-wrapper #grms-awards-page input.gl-search__input:focus { border: none; box-shadow: none; }
#content-wrapper #grms-grants-page .gl-search__input::placeholder,
#content-wrapper #grms-awards-page .gl-search__input::placeholder { color: var(--gl-subtle); opacity: 1; }

/* Dropdowns. The native <select> is the form control and the fallback; with
   scripting on it is hidden and the design's button + panel stand in for it. */
#content-wrapper #grms-grants-page .gl-dd,
#content-wrapper #grms-awards-page .gl-dd {
  flex: 1 1 170px;
  min-width: 0;
  position: relative;
  display: flex;
}
html body #content-wrapper #grms-grants-page select.gl-dd__native,
html body #content-wrapper #grms-awards-page select.gl-dd__native {
  flex: 1;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 0 28px 0 11px;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background-color: #fff;
  font: inherit;
  font-size: 12.5px;
  color: var(--gl-text);
}
html.gl-js body #content-wrapper #grms-grants-page select.gl-dd__native,
html.gl-js body #content-wrapper #grms-awards-page select.gl-dd__native { display: none; }
html:not(.gl-js) #content-wrapper #grms-grants-page .gl-dd__btn,
html:not(.gl-js) #content-wrapper #grms-awards-page .gl-dd__btn { display: none; }
html body #content-wrapper #grms-grants-page .gl-dd__btn,
html body #content-wrapper #grms-awards-page .gl-dd__btn {
  flex: 1;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 11px;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--gl-text);
  text-align: left;
  cursor: pointer;
}
html body #content-wrapper #grms-grants-page .gl-dd__btn:hover,
html body #content-wrapper #grms-awards-page .gl-dd__btn:hover { border-color: var(--gl-border-hover); }
html body #content-wrapper #grms-grants-page .gl-dd.is-open > .gl-dd__btn,
html body #content-wrapper #grms-awards-page .gl-dd.is-open > .gl-dd__btn,
html body #content-wrapper #grms-grants-page .gl-dd__btn:focus-visible,
html body #content-wrapper #grms-awards-page .gl-dd__btn:focus-visible {
  outline: none;
  border-color: var(--gl-focus);
  box-shadow: var(--gl-ring);
}
#content-wrapper #grms-grants-page .gl-dd__text,
#content-wrapper #grms-awards-page .gl-dd__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}
#content-wrapper #grms-grants-page .gl-dd__text.is-all,
#content-wrapper #grms-awards-page .gl-dd__text.is-all { font-weight: 400; }
#content-wrapper #grms-grants-page .gl-dd__caret,
#content-wrapper #grms-awards-page .gl-dd__caret { color: var(--gl-muted); }
#content-wrapper #grms-grants-page .gl-dd__dot,
#content-wrapper #grms-awards-page .gl-dd__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#content-wrapper #grms-grants-page .gl-dd__panel,
#content-wrapper #grms-awards-page .gl-dd__panel {
  position: absolute;
  left: 0;
  top: 40px;
  z-index: 21;
  min-width: 100%;
  width: max-content;
  /* Never wider than the screen it opens on: a phone's 390px less its gutters. */
  max-width: min(300px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--gl-border);
  border-radius: 12px;
  box-shadow: var(--gl-menu-shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* The rows menu sits on the footer and opens UPWARD, as the design draws it. */
#content-wrapper #grms-grants-page .gl-dd--up .gl-dd__panel,
#content-wrapper #grms-awards-page .gl-dd--up .gl-dd__panel { top: auto; bottom: 40px; }
html body #content-wrapper #grms-grants-page .gl-dd__opt,
html body #content-wrapper #grms-awards-page .gl-dd__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  /* A label that outgrows the menu WRAPS inside it. A funder reads "name —
     programme", and two programmes of one agency differ only at the end, so
     an ellipsis would make them look identical; nowrap painted them over the
     table. One-line options are still 34px. */
  height: auto;
  min-height: 34px;
  padding: 7px 10px;
  line-height: 1.35;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--gl-text);
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
html body #content-wrapper #grms-grants-page .gl-dd__opt:hover,
html body #content-wrapper #grms-awards-page .gl-dd__opt:hover { background: #f4f6f9; }
html body #content-wrapper #grms-grants-page .gl-dd__opt.is-on,
html body #content-wrapper #grms-awards-page .gl-dd__opt.is-on { background: #eef5f8; font-weight: 700; }
html body #content-wrapper #grms-grants-page .gl-dd__opt:focus-visible,
html body #content-wrapper #grms-awards-page .gl-dd__opt:focus-visible { outline: none; box-shadow: var(--gl-ring); }
#content-wrapper #grms-grants-page .gl-dd__optdot,
#content-wrapper #grms-awards-page .gl-dd__optdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; }
#content-wrapper #grms-grants-page .gl-dd__optlabel,
#content-wrapper #grms-awards-page .gl-dd__optlabel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#content-wrapper #grms-grants-page .gl-dd__count,
#content-wrapper #grms-awards-page .gl-dd__count { font-size: 12px; color: var(--gl-subtle); font-variant-numeric: tabular-nums; }
#content-wrapper #grms-grants-page .gl-dd__check,
#content-wrapper #grms-awards-page .gl-dd__check { width: 16px; font-size: 16px; color: var(--gl-primary); }

#content-wrapper #grms-grants-page .gl-clear-slot:empty,
#content-wrapper #grms-awards-page .gl-clear-slot:empty { display: none; }
#content-wrapper #grms-grants-page .gl-clear,
#content-wrapper #grms-awards-page .gl-clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c9353a;
  white-space: nowrap;
  text-decoration: none;
}
#content-wrapper #grms-grants-page .gl-clear:hover,
#content-wrapper #grms-awards-page .gl-clear:hover { color: #a82a2e; text-decoration: underline; }

/* ---- Messages, as the design's toast inside the card ------------------------ */
#content-wrapper #grms-grants-page .gl-toast,
#content-wrapper #grms-awards-page .gl-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  background: #e6f6ee;
  border-bottom: 1px solid #cdebdc;
  color: #157a4c;
}
#content-wrapper #grms-grants-page .gl-toast--error,
#content-wrapper #grms-awards-page .gl-toast--error { background: #fdecec; border-bottom-color: #f6caca; color: #b42328; }
#content-wrapper #grms-grants-page .gl-toast--warning,
#content-wrapper #grms-awards-page .gl-toast--warning { background: #fff6e5; border-bottom-color: #f6e0b4; color: #8f5c12; }
#content-wrapper #grms-grants-page .gl-toast--info,
#content-wrapper #grms-awards-page .gl-toast--info,
#content-wrapper #grms-grants-page .gl-toast--debug,
#content-wrapper #grms-awards-page .gl-toast--debug { background: #e7f3f7; border-bottom-color: #c9e3ec; color: #1f6d89; }
#content-wrapper #grms-grants-page .gl-toast__text,
#content-wrapper #grms-awards-page .gl-toast__text { flex: 1; min-width: 0; }
html body #content-wrapper #grms-grants-page .gl-toast__x,
html body #content-wrapper #grms-awards-page .gl-toast__x {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---- The table -------------------------------------------------------------- */
#content-wrapper #grms-grants-page .gl-scroll,
#content-wrapper #grms-awards-page .gl-scroll { border-radius: 0; }
#content-wrapper #grms-grants-page table.gl-table,
#content-wrapper #grms-awards-page table.gl-table { border-collapse: separate; border-spacing: 0; margin: 0; }
#content-wrapper #grms-grants-page table.gl-table thead th,
#content-wrapper #grms-awards-page table.gl-table thead th {
  height: 42px;
  padding: 0 16px;
  background: var(--gl-head-bg);
  border-bottom: 1px solid #dde3ea;
  border-radius: 0;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
#content-wrapper #grms-grants-page table.gl-table thead th:first-child,
#content-wrapper #grms-awards-page table.gl-table thead th:first-child { padding-left: 20px; }
#content-wrapper #grms-grants-page table.gl-table thead th:last-child,
#content-wrapper #grms-awards-page table.gl-table thead th:last-child { padding-right: 20px; }
#content-wrapper #grms-grants-page .gl-sort,
#content-wrapper #grms-awards-page .gl-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gl-muted);
  text-decoration: none;
  white-space: nowrap;
}
#content-wrapper #grms-grants-page .gl-sort:hover,
#content-wrapper #grms-awards-page .gl-sort:hover,
#content-wrapper #grms-grants-page .gl-sort.is-on,
#content-wrapper #grms-awards-page .gl-sort.is-on { color: var(--gl-text); }
#content-wrapper #grms-grants-page .gl-sort__icon,
#content-wrapper #grms-awards-page .gl-sort__icon { font-size: 15px; line-height: 1; opacity: 0.5; }
#content-wrapper #grms-grants-page .gl-sort.is-on .gl-sort__icon,
#content-wrapper #grms-awards-page .gl-sort.is-on .gl-sort__icon { opacity: 1; }

#content-wrapper #grms-grants-page table.gl-table tbody tr.gl-row,
#content-wrapper #grms-awards-page table.gl-table tbody tr.gl-row { background: #fff; cursor: pointer; }
#content-wrapper #grms-grants-page table.gl-table tbody tr.gl-row:nth-child(even),
#content-wrapper #grms-awards-page table.gl-table tbody tr.gl-row:nth-child(even) { background: var(--gl-zebra); }
#content-wrapper #grms-grants-page table.gl-table tbody tr.gl-row:hover,
#content-wrapper #grms-awards-page table.gl-table tbody tr.gl-row:hover { background: var(--gl-hover); }
#content-wrapper #grms-grants-page table.gl-table tbody td,
#content-wrapper #grms-awards-page table.gl-table tbody td {
  height: 58px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--gl-divider);
  vertical-align: middle;
  font-size: 12.5px;
  color: var(--gl-text);
}
#content-wrapper #grms-grants-page table.gl-table tbody td:first-child,
#content-wrapper #grms-awards-page table.gl-table tbody td:first-child { padding-left: 20px; }
#content-wrapper #grms-grants-page table.gl-table tbody td:last-child,
#content-wrapper #grms-awards-page table.gl-table tbody td:last-child { padding-right: 20px; }

/* Cell rules name the td: the generic `tbody td` rule above is (2,1,3), and a
   bare `.gl-cell--ref` (2,1,0) would lose its colour to it. */
#content-wrapper #grms-grants-page table.gl-table tbody td.gl-cell--ref,
#content-wrapper #grms-awards-page table.gl-table tbody td.gl-cell--ref {
  font-size: 12px;
  color: var(--gl-subtle);
  font-variant-numeric: tabular-nums;
}
#content-wrapper #grms-grants-page .gl-cell--title,
#content-wrapper #grms-awards-page .gl-cell--title { min-width: 0; }
#content-wrapper #grms-grants-page .gl-title-wrap,
#content-wrapper #grms-awards-page .gl-title-wrap { position: relative; display: block; min-width: 0; }
#content-wrapper #grms-grants-page a.gl-title,
#content-wrapper #grms-awards-page a.gl-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  color: var(--gl-text);
  text-decoration: none;
}
#content-wrapper #grms-grants-page a.gl-title:hover,
#content-wrapper #grms-awards-page a.gl-title:hover { color: var(--gl-text); }
#content-wrapper #grms-grants-page a.gl-title:focus-visible,
#content-wrapper #grms-awards-page a.gl-title:focus-visible { outline: 2px solid var(--gl-focus); outline-offset: 2px; border-radius: 3px; }
/* The full title on hover, as the design's tooltip draws it. */
#content-wrapper #grms-grants-page .gl-tip,
#content-wrapper #grms-awards-page .gl-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 30;
  display: none;
  width: max-content;
  max-width: 380px;
  padding: 8px 10px;
  border: 1px solid var(--gl-border);
  border-radius: 8px;
  background: #f7f9fb;
  box-shadow: 0 6px 16px rgba(21, 32, 46, 0.08);
  color: var(--gl-text-2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
}
#content-wrapper #grms-grants-page .gl-title-wrap:hover .gl-tip,
#content-wrapper #grms-awards-page .gl-title-wrap:hover .gl-tip { display: block; }
#content-wrapper #grms-grants-page .gl-cat,
#content-wrapper #grms-awards-page .gl-cat {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11.5px;
  color: var(--gl-muted);
}
#content-wrapper #grms-grants-page .gl-funder,
#content-wrapper #grms-awards-page .gl-funder {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--gl-text-2);
}
#content-wrapper #grms-grants-page .gl-funder .gl-ic,
#content-wrapper #grms-awards-page .gl-funder .gl-ic { color: var(--gl-subtle); }
#content-wrapper #grms-grants-page .gl-ellip,
#content-wrapper #grms-awards-page .gl-ellip { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#content-wrapper #grms-grants-page .gl-none,
#content-wrapper #grms-awards-page .gl-none { color: var(--gl-disabled); }
#content-wrapper #grms-grants-page .gl-amt,
#content-wrapper #grms-awards-page .gl-amt {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gl-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#content-wrapper #grms-grants-page .gl-amt.is-none,
#content-wrapper #grms-awards-page .gl-amt.is-none { color: var(--gl-disabled); }
#content-wrapper #grms-grants-page .gl-amt__note,
#content-wrapper #grms-awards-page .gl-amt__note { display: block; margin-top: 1px; font-size: 11px; color: var(--gl-subtle); }
#content-wrapper #grms-grants-page .gl-dl,
#content-wrapper #grms-awards-page .gl-dl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gl-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#content-wrapper #grms-grants-page .gl-dl.is-none,
#content-wrapper #grms-awards-page .gl-dl.is-none { font-weight: 500; color: var(--gl-disabled); }

#content-wrapper #grms-grants-page table.gl-table tbody tr.gl-emptyrow td,
#content-wrapper #grms-awards-page table.gl-table tbody tr.gl-emptyrow td { height: auto; padding: 0; background: #fff; }
#content-wrapper #grms-grants-page .gl-empty,
#content-wrapper #grms-awards-page .gl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  color: var(--gl-muted);
  font-size: 13px;
}
#content-wrapper #grms-grants-page .gl-empty__icon,
#content-wrapper #grms-awards-page .gl-empty__icon { font-size: 28px; color: var(--gl-disabled); }
#content-wrapper #grms-grants-page .gl-empty__link,
#content-wrapper #grms-awards-page .gl-empty__link { font-weight: 600; color: var(--gl-primary); }

/* ---- Footer: showing, rows, pager ------------------------------------------- */
#content-wrapper #grms-grants-page .gl-foot,
#content-wrapper #grms-awards-page .gl-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  flex-wrap: wrap;
  border-top: 0;
}
#content-wrapper #grms-grants-page .gl-foot__showing,
#content-wrapper #grms-awards-page .gl-foot__showing { font-size: 12px; color: var(--gl-muted); }
#content-wrapper #grms-grants-page .gl-foot__spacer,
#content-wrapper #grms-awards-page .gl-foot__spacer { flex: 1; }
#content-wrapper #grms-grants-page .gl-rows,
#content-wrapper #grms-awards-page .gl-rows { margin: 0; display: flex; align-items: center; gap: 8px; }
#content-wrapper #grms-grants-page .gl-rows .gl-dd,
#content-wrapper #grms-awards-page .gl-rows .gl-dd { flex: none; width: 130px; }
#content-wrapper #grms-grants-page .gl-pager,
#content-wrapper #grms-awards-page .gl-pager { display: flex; align-items: center; gap: 6px; margin: 0; }
html body #content-wrapper #grms-grants-page .gl-pager__step,
html body #content-wrapper #grms-awards-page .gl-pager__step,
html body #content-wrapper #grms-grants-page .gl-pager__num,
html body #content-wrapper #grms-awards-page .gl-pager__num {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--gl-border-input);
  border-radius: 7px;
  background: #fff;
  color: var(--gl-text-2);
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
html body #content-wrapper #grms-grants-page .gl-pager__step,
html body #content-wrapper #grms-awards-page .gl-pager__step { width: 30px; padding: 0; }
html body #content-wrapper #grms-grants-page .gl-pager__step .material-symbols-rounded,
html body #content-wrapper #grms-awards-page .gl-pager__step .material-symbols-rounded { font-size: 18px; }
html body #content-wrapper #grms-grants-page a.gl-pager__step:hover,
html body #content-wrapper #grms-awards-page a.gl-pager__step:hover,
html body #content-wrapper #grms-grants-page a.gl-pager__num:hover,
html body #content-wrapper #grms-awards-page a.gl-pager__num:hover { background: #f2f4f7; color: var(--gl-text-2); }
html body #content-wrapper #grms-grants-page .gl-pager__step.is-disabled,
html body #content-wrapper #grms-awards-page .gl-pager__step.is-disabled { opacity: 0.4; pointer-events: none; }
html body #content-wrapper #grms-grants-page .gl-pager__num.is-current,
html body #content-wrapper #grms-awards-page .gl-pager__num.is-current {
  background: var(--gl-primary);
  border-color: var(--gl-primary);
  color: #fff;
}
#content-wrapper #grms-grants-page .gl-pager__gap,
#content-wrapper #grms-awards-page .gl-pager__gap { padding: 0 2px; color: var(--gl-subtle); font-size: 12.5px; }

/* Phones: the header actions wrap under the title and the toolbar stacks; the
   table keeps its 980px floor and scrolls inside the card. */
@media (max-width: 640px) {
  #content-wrapper #grms-grants-page .gl-head,
  #content-wrapper #grms-awards-page .gl-head { align-items: flex-start; }
  #content-wrapper #grms-grants-page .gl-panel,
  #content-wrapper #grms-awards-page .gl-panel { right: auto; left: 0; max-width: calc(100vw - 32px); }
  #content-wrapper #grms-grants-page .gl-search,
  #content-wrapper #grms-awards-page .gl-search,
  #content-wrapper #grms-grants-page .gl-dd,
  #content-wrapper #grms-awards-page .gl-dd { flex-basis: 100%; }
  #content-wrapper #grms-grants-page .gl-rows .gl-dd,
  #content-wrapper #grms-awards-page .gl-rows .gl-dd { flex-basis: auto; }
}

/* ===========================================================================
   AWARDS REGISTER — Monika's `GRMS Awards.dc.html`, value for value.

   The page wears the shared register components above (its id is in every
   gl-* selector list); these are the pieces only it has: the header's figures,
   the Record-an-award form, the Funders card and the award cells. Scoped to
   #grms-awards-page for the same reason the block above is: two ids out-rank
   the theme's touch-target and input floors whatever order the sheets load in.
   =========================================================================== */

/* ---- Header figures: "22 awards · 7 awaiting acceptance · $X in force" ------ */
#content-wrapper #grms-awards-page .aw-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#content-wrapper #grms-awards-page .aw-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gl-disabled);
  flex: none;
}
#content-wrapper #grms-awards-page .aw-head__warn { font-weight: 700; color: #8f5c12; }   /* design #b5761b: 3.4:1 */
#content-wrapper #grms-awards-page .aw-head__amt { font-variant-numeric: tabular-nums; }

/* ---- Cards ------------------------------------------------------------------ */
#content-wrapper #grms-awards-page .aw-card {
  background: #fff;
  border: 1px solid var(--gl-border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  margin: 0;
}
#content-wrapper #grms-awards-page .aw-denied { padding: 16px 18px; font-size: 13px; color: var(--gl-text-2); }
#content-wrapper #grms-awards-page .aw-denied p { margin: 0; }
#content-wrapper #grms-awards-page .aw-denied .aw-denied__note { margin-top: 8px; font-weight: 600; }
html body #content-wrapper #grms-awards-page .aw-h2 {
  margin: 0;
  font-size: 15px !important;   /* theme-buzzrfp.css forces #content-wrapper h2 */
  font-weight: 800;
  line-height: 1.3;
  color: var(--gl-text);
  letter-spacing: 0;
}
#content-wrapper #grms-awards-page .aw-note { font-size: 12.5px; color: var(--gl-muted); }
#content-wrapper #grms-awards-page .aw-req { color: #c9353a; }
#content-wrapper #grms-awards-page .aw-none { color: var(--gl-disabled); }

/* ---- Record an award ------------------------------------------------------- */
#content-wrapper #grms-awards-page .aw-record { scroll-margin-top: 80px; }
#content-wrapper #grms-awards-page .aw-record__form { margin: 0; display: flex; flex-direction: column; }
#content-wrapper #grms-awards-page .aw-record__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px 0;
}
#content-wrapper #grms-awards-page .aw-record__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  padding: 14px 18px 18px;
}
#content-wrapper #grms-awards-page .aw-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: #f7f9fb;
}
#content-wrapper #grms-awards-page .aw-group--terms { align-self: start; }
#content-wrapper #grms-awards-page .aw-group__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gl-muted);
}
#content-wrapper #grms-awards-page .aw-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
#content-wrapper #grms-awards-page .aw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
#content-wrapper #grms-awards-page .aw-field__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gl-text-2);
  padding: 0;
}
#content-wrapper #grms-awards-page .aw-field__error { font-size: 11.5px; color: #c9353a; }
html body #content-wrapper #grms-awards-page input.aw-input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 11px;
  margin: 0;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--gl-text);
  outline: none;
}
html body #content-wrapper #grms-awards-page input.aw-input--sm { height: 34px; min-height: 34px; }
html body #content-wrapper #grms-awards-page input.aw-input:focus { border-color: var(--gl-focus); box-shadow: var(--gl-ring); }
html body #content-wrapper #grms-awards-page input.aw-input.is-invalid { border-color: #e5484d; }
#content-wrapper #grms-awards-page input.aw-input::placeholder,
#content-wrapper #grms-awards-page input.aw-affix__input::placeholder { color: var(--gl-subtle); opacity: 1; }

/* The form's dropdowns stand 36px tall like its inputs; the toolbar's stay 34.
   `flex: none` because the shared .gl-dd rule is written for the toolbar's ROW
   (flex: 1 1 170px is a width there); inside a field's COLUMN the same basis
   is a 170px HEIGHT, which opened a gap under every dropdown in the form. */
#content-wrapper #grms-awards-page .aw-field > .gl-dd { flex: none; }
html body #content-wrapper #grms-awards-page .aw-record .gl-dd__btn { height: 36px; min-height: 36px; }
#content-wrapper #grms-awards-page .aw-record .gl-dd__panel { top: 42px; }
html body #content-wrapper #grms-awards-page .aw-record select.gl-dd__native { height: 36px; }
#content-wrapper #grms-awards-page .aw-record .gl-dd__text.is-all { color: var(--gl-disabled); }

/* Period of performance: a named pair, each end a boxed, inline-labelled date. */
#content-wrapper #grms-awards-page .aw-pop {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#content-wrapper #grms-awards-page .aw-pop > legend { float: left; width: 100%; margin: 0 0 6px; }
#content-wrapper #grms-awards-page .aw-pop > legend + * { clear: both; }
#content-wrapper #grms-awards-page .aw-inline,
#content-wrapper #grms-awards-page .aw-affix {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 11px;
  margin: 0;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}
#content-wrapper #grms-awards-page .aw-affix { gap: 6px; padding: 0 11px; }
#content-wrapper #grms-awards-page .aw-inline:focus-within,
#content-wrapper #grms-awards-page .aw-affix:focus-within { border-color: var(--gl-focus); box-shadow: var(--gl-ring); }
#content-wrapper #grms-awards-page .aw-inline__label { font-size: 12px; font-weight: 600; color: var(--gl-muted); }
#content-wrapper #grms-awards-page .aw-affix__unit { font-size: 12.5px; color: var(--gl-muted); }
html body #content-wrapper #grms-awards-page input.aw-inline__input,
html body #content-wrapper #grms-awards-page input.aw-affix__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--gl-text);
}
html body #content-wrapper #grms-awards-page input.aw-affix__input { font-variant-numeric: tabular-nums; }

#content-wrapper #grms-awards-page .aw-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--gl-text);
  cursor: pointer;
}
#content-wrapper #grms-awards-page .aw-check > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  accent-color: var(--gl-primary);
}
#content-wrapper #grms-awards-page .aw-check__note { color: var(--gl-muted); }

/* The linked-grant picker is shared with the award page, so it is restyled here
   rather than rewritten: its own caption takes the form's caption style, and
   its search box gets the design's link icon. */
#content-wrapper #grms-awards-page .aw-picker .grms-grant-picker > label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gl-text-2);
}
#content-wrapper #grms-awards-page .aw-picker .grms-grant-picker > label .text-gray-400 { font-weight: 500; color: var(--gl-subtle); }
#content-wrapper #grms-awards-page .aw-picker [data-picker-search]::before {
  content: "link";
  position: absolute;
  left: 11px;
  top: 0;
  height: 36px;
  display: flex;
  align-items: center;
  font-family: 'Material Symbols Rounded';
  font-size: 17px;
  line-height: 1;
  color: var(--gl-muted);
  pointer-events: none;
  z-index: 1;
}
html body #content-wrapper #grms-awards-page .aw-picker input[data-picker-input] {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 11px 0 34px;
  border: 1px solid var(--gl-border-input);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--gl-text);
}
html body #content-wrapper #grms-awards-page .aw-picker input[data-picker-input]:focus { border-color: var(--gl-focus); box-shadow: var(--gl-ring); outline: none; }
#content-wrapper #grms-awards-page .aw-picker .grms-grant-picker > p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gl-muted);
}

#content-wrapper #grms-awards-page .aw-record__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--gl-divider);
}
#content-wrapper #grms-awards-page .aw-cancel { font-size: 12.5px; font-weight: 600; color: var(--gl-muted); text-decoration: none; }
#content-wrapper #grms-awards-page .aw-cancel:hover { color: var(--gl-text); }
#content-wrapper #grms-awards-page .aw-record__hint { flex: 1 1 280px; text-wrap: pretty; }

/* ---- Funders ---------------------------------------------------------------- */
#content-wrapper #grms-awards-page .aw-funders { scroll-margin-top: 80px; }
#content-wrapper #grms-awards-page .aw-funders__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 14px;
  list-style: none;
  cursor: pointer;
  color: var(--gl-text);
}
#content-wrapper #grms-awards-page .aw-funders__head::-webkit-details-marker { display: none; }
#content-wrapper #grms-awards-page .aw-funders__head:hover { background: #fafbfc; }
#content-wrapper #grms-awards-page .aw-funders__head:focus-visible { outline: 2px solid var(--gl-focus); outline-offset: -2px; }
#content-wrapper #grms-awards-page .aw-funders[open] > .aw-funders__head { border-radius: 14px 14px 0 0; }
#content-wrapper #grms-awards-page .aw-count {
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: #e6f6ee;
  color: #157a4c;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
#content-wrapper #grms-awards-page .aw-funders__note { flex: 1; font-size: 12.5px; color: var(--gl-muted); }
#content-wrapper #grms-awards-page .aw-funders__caret { font-size: 20px; color: var(--gl-muted); transition: transform .15s ease; }
#content-wrapper #grms-awards-page .aw-funders[open] .aw-funders__caret { transform: rotate(180deg); }
#content-wrapper #grms-awards-page .aw-funders__add { padding: 12px 16px; border-top: 1px solid var(--gl-border); }
/* A refusal drawn in the card it concerns (_awards_notices.html). */
#content-wrapper #grms-awards-page .aw-notices--record { margin-top: 12px; }
#content-wrapper #grms-awards-page .aw-notices--funders { border-top: 1px solid var(--gl-border); }
#content-wrapper #grms-awards-page .aw-funders__form {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#content-wrapper #grms-awards-page .aw-funders__name { flex: 1.4 1 200px; min-width: 0; margin: 0; }
#content-wrapper #grms-awards-page .aw-funders__type { flex: 1 1 140px; }
#content-wrapper #grms-awards-page .aw-funders__prog { flex: 1.2 1 180px; min-width: 0; margin: 0; }
#content-wrapper #grms-awards-page .aw-funders__tribal { flex: none; height: 34px; padding: 0 4px; white-space: nowrap; }
#content-wrapper #grms-awards-page .aw-funders__error { flex-basis: 100%; }
html body #content-wrapper #grms-awards-page .aw-funders__submit { flex: none; padding: 0 16px; }
#content-wrapper #grms-awards-page .aw-funders__scroll { border-top: 1px solid var(--gl-border); position: relative; }   /* contains its header's sr-only text, as .aw-scroll does */
#content-wrapper #grms-awards-page table.aw-ftable {
  width: 100%;
  min-width: 800px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
#content-wrapper #grms-awards-page table.aw-ftable th {
  height: 40px;
  padding: 0 8px;
  background: var(--gl-head-bg);
  border-bottom: 1px solid #dde3ea;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gl-muted);
  text-align: left;
  white-space: nowrap;
}
#content-wrapper #grms-awards-page table.aw-ftable td {
  height: 48px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--gl-divider);
  font-size: 12.5px;
  color: var(--gl-text-2);
  vertical-align: middle;
  overflow-wrap: anywhere;   /* as the register's cells: never over the next column */
}
#content-wrapper #grms-awards-page table.aw-ftable th:first-child,
#content-wrapper #grms-awards-page table.aw-ftable td:first-child { padding-left: 18px; }
#content-wrapper #grms-awards-page table.aw-ftable th:last-child,
#content-wrapper #grms-awards-page table.aw-ftable td:last-child { padding-right: 18px; }
#content-wrapper #grms-awards-page table.aw-ftable th:nth-child(2) { width: 126px; }
#content-wrapper #grms-awards-page table.aw-ftable th:nth-child(3) { width: 25%; }   /* the design's 1 : 0.6 */
#content-wrapper #grms-awards-page table.aw-ftable th:nth-child(4) { width: 86px; }
#content-wrapper #grms-awards-page table.aw-ftable th:nth-child(5) { width: 106px; }
#content-wrapper #grms-awards-page table.aw-ftable th:nth-child(6) { width: 66px; }
#content-wrapper #grms-awards-page table.aw-ftable tbody tr:nth-child(even) td { background: var(--gl-zebra); }
#content-wrapper #grms-awards-page table.aw-ftable .aw-ftable__c { text-align: center; }
#content-wrapper #grms-awards-page table.aw-ftable td.aw-ftable__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gl-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#content-wrapper #grms-awards-page table.aw-ftable td.aw-ftable__c { font-size: 13px; font-weight: 600; color: var(--gl-text); font-variant-numeric: tabular-nums; }
#content-wrapper #grms-awards-page table.aw-ftable td.aw-ftable__c.aw-none { color: var(--gl-disabled); }
#content-wrapper #grms-awards-page .aw-ftable__tick { font-size: 18px; line-height: 1; color: #157a4c; vertical-align: middle; }
#content-wrapper #grms-awards-page table.aw-ftable td.aw-ftable__x { text-align: right; }
#content-wrapper #grms-awards-page table.aw-ftable td.aw-ftable__x form { margin: 0; display: inline-flex; }
#content-wrapper #grms-awards-page table.aw-ftable td.aw-ftable__empty { height: auto; padding: 24px 18px; text-align: center; color: var(--gl-muted); }
html body #content-wrapper #grms-awards-page .aw-fdel {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #c9353a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html body #content-wrapper #grms-awards-page .aw-fdel .material-symbols-rounded { font-size: 19px; line-height: 1; }
html body #content-wrapper #grms-awards-page button.aw-fdel:hover { background: #fdf0f0; }
html body #content-wrapper #grms-awards-page button.aw-fdel:focus-visible { outline: 2px solid var(--gl-focus); outline-offset: 1px; }
html body #content-wrapper #grms-awards-page .aw-fdel.is-disabled { color: var(--gl-disabled); opacity: .55; cursor: not-allowed; }

/* ---- The register's toolbar: search, Status, Funder, the window, Apply ----- */
/* A column of two rows (the controls, then Clear all). nowrap, because the
   shared .gl-toolbar wraps, and Chrome sizes a WRAPPING column from its rows'
   wrapped height -- the controls' row stood 76px tall with one 34px line in it. */
#content-wrapper #grms-awards-page .aw-toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
#content-wrapper #grms-awards-page .aw-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#content-wrapper #grms-awards-page .aw-toolbar .aw-search { flex: 1.4 1 220px; }
#content-wrapper #grms-awards-page .aw-toolbar .aw-toolbar__status { flex: 1 1 170px; }
#content-wrapper #grms-awards-page .aw-toolbar .aw-toolbar__funder { flex: 1.4 1 220px; }
#content-wrapper #grms-awards-page .aw-toolbar__window { flex: none; white-space: nowrap; }
html body #content-wrapper #grms-awards-page .aw-apply { flex: none; height: 34px; min-height: 34px; padding: 0 20px; border-radius: 8px; }
#content-wrapper #grms-awards-page .aw-toolbar__clear { display: flex; justify-content: flex-end; }
#content-wrapper #grms-awards-page .aw-dd__lead { flex: none; font-size: 12px; font-weight: 600; color: var(--gl-muted); }
#content-wrapper #grms-awards-page .aw-toolbar__funder .gl-dd__text { font-weight: 600; }
#content-wrapper #grms-awards-page .aw-toolbar__funder .gl-dd__text.is-all { font-weight: 400; }

/* ---- The register ----------------------------------------------------------- */
/* The design's grid: 56px | 1.6fr | 1fr | 80px | 130px | 150px | 130px | 100px,
   16px between columns, 20px at the edges. As a fixed-layout table each <col>
   carries its column's share of the gap, so the six fixed columns are 766px.

   THE TWO fr COLUMNS. A <col> width of calc(% - px) is IGNORED by Chrome's
   table layout (measured: Award and Funder then split the rest evenly, 207 and
   207 at 1440). So Funder takes a plain percentage, calibrated so that at a
   1440px window -- the card's 1164px -- it is the design's 153px and Award the
   design's 245px, 1.6 to 1; wider windows give the extra to Award.

   THE FLOOR is 1140px, not the design's 1180: the console's content column is
   16px narrower than the design's, and 1180 put a sideways scroll on every
   1440px screen. Below the floor the card scrolls inside itself (WG-387). */
#content-wrapper #grms-awards-page table.gl-table.aw-table { min-width: 1140px; }
/* The scroller is the containing block for anything absolutely placed in a
   cell: the Ends column's screen-reader note (.sr-only is position:absolute)
   otherwise took the PAGE as its containing block -- <main>'s overflow clips
   only what it contains -- and its off-screen column widened the whole page to
   1016px on a phone. */
#content-wrapper #grms-awards-page .aw-scroll { position: relative; }
#content-wrapper #grms-awards-page .aw-col--ref    { width: 84px; }
#content-wrapper #grms-awards-page .aw-col--funder { width: 13.15%; }
#content-wrapper #grms-awards-page .aw-col--gid    { width: 96px; }
#content-wrapper #grms-awards-page .aw-col--status { width: 166px; }   /* the design's 130 cannot hold a "Pending acceptance" pill */
#content-wrapper #grms-awards-page .aw-col--amount { width: 146px; }
#content-wrapper #grms-awards-page .aw-col--end    { width: 146px; }
#content-wrapper #grms-awards-page .aw-col--life   { width: 128px; }
#content-wrapper #grms-awards-page table.gl-table.aw-table thead th { padding: 0 8px; }
#content-wrapper #grms-awards-page table.gl-table.aw-table thead th:first-child { padding-left: 20px; }
#content-wrapper #grms-awards-page table.gl-table.aw-table thead th:last-child { padding-right: 20px; }
#content-wrapper #grms-awards-page table.gl-table.aw-table thead th.aw-th--amount { text-align: center; }
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td {
  height: 58px;
  padding: 11px 8px;
  vertical-align: top;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gl-text-2);
  /* A fixed-layout column never widens for its content, so an unbroken value
     -- a 50-character Grant ID, a long Ref # -- would paint over the column
     beside it. It wraps inside its own column instead. */
  overflow-wrap: anywhere;
}
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td:first-child { padding-left: 20px; }
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td:last-child { padding-right: 20px; }
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody tr.gl-emptyrow td { height: auto; padding: 0; }
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td.is-none { color: var(--gl-disabled); }
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td.aw-cell--ref {
  padding-top: 12px;
  font-size: 13px;
  color: var(--gl-text);
  font-variant-numeric: tabular-nums;
}
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td.aw-cell--ref.is-none { color: var(--gl-disabled); }
#content-wrapper #grms-awards-page .aw-title { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
#content-wrapper #grms-awards-page table.gl-table.aw-table a.grms-awards__title {
  display: inline;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gl-primary);
  text-decoration: none;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
#content-wrapper #grms-awards-page table.gl-table.aw-table a.grms-awards__title:hover { color: var(--gl-primary-hover); text-decoration: underline; }
#content-wrapper #grms-awards-page table.gl-table.aw-table a.grms-awards__title:focus-visible { outline: 2px solid var(--gl-focus); outline-offset: 2px; border-radius: 3px; }
#content-wrapper #grms-awards-page .aw-title__ic {
  flex: none;
  margin-top: 1px;
  font-size: 15px;
  line-height: 1;
  color: var(--gl-muted);
  font-variation-settings: 'FILL' 1;
}
#content-wrapper #grms-awards-page .aw-title__ic--gavel { color: #8f5c12; }
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td.aw-cell--status { padding-top: 10px; }
#content-wrapper #grms-awards-page .aw-cell--status { white-space: nowrap; }
#content-wrapper #grms-awards-page .aw-status,
#content-wrapper #grms-awards-page .aw-notacc {
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-decoration: none;
}
#content-wrapper #grms-awards-page .aw-notacc { display: flex; width: max-content; margin-top: 4px; background: #fff1e3; color: #9a4a05; }   /* design #b85c0a: 4.1:1 */
#content-wrapper #grms-awards-page .aw-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#content-wrapper #grms-awards-page .aw-status--pending_acceptance { background: #fdf3dc; color: #8f5c12; }   /* design #9a6a12: 4.3:1 */
#content-wrapper #grms-awards-page .aw-status--active             { background: #e6f6ee; color: #157a4c; }
#content-wrapper #grms-awards-page .aw-status--suspended          { background: #eef0fb; color: #4a5bc4; }
#content-wrapper #grms-awards-page .aw-status--closeout           { background: #f2f4f7; color: #5a6676; }
#content-wrapper #grms-awards-page .aw-status--closed             { background: #e9edf2; color: #3a4656; }
#content-wrapper #grms-awards-page .aw-status--terminated,
#content-wrapper #grms-awards-page .aw-status--declined           { background: #fdecec; color: #c9353a; }
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td.aw-cell--amount {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--gl-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#content-wrapper #grms-awards-page table.gl-table.aw-table tbody td.aw-cell--amount.is-none { color: var(--gl-disabled); }
#content-wrapper #grms-awards-page .aw-end__date {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gl-text);
  font-variant-numeric: tabular-nums;
}
#content-wrapper #grms-awards-page .aw-end__date.is-none { color: var(--gl-disabled); }
#content-wrapper #grms-awards-page .aw-end__rel { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--gl-muted); }
#content-wrapper #grms-awards-page .aw-end__rel.is-window { font-weight: 700; color: #8f5c12; }   /* design #b5761b: 3.4-3.8:1 */
#content-wrapper #grms-awards-page .aw-end__rel.is-ended { font-weight: 700; color: #c9353a; }

/* ---- A success, as the design's toast ---------------------------------------- */
#content-wrapper #grms-awards-page .aw-toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#content-wrapper #grms-awards-page .aw-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 14px;
  border-radius: 10px;
  background: #157a4c;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(21, 32, 46, 0.2);
}
html body #content-wrapper #grms-awards-page .aw-toast__x {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html body #content-wrapper #grms-awards-page .aw-toast__x:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

@media (max-width: 640px) {
  #content-wrapper #grms-awards-page .aw-toolbar .aw-search,
  #content-wrapper #grms-awards-page .aw-toolbar .aw-toolbar__status,
  #content-wrapper #grms-awards-page .aw-toolbar .aw-toolbar__funder { flex-basis: 100%; }
  #content-wrapper #grms-awards-page .aw-funders__form > * { flex-basis: 100%; }
  /* Those menus span the card here, so the list takes the control's exact
     width: a long funder wraps inside it instead of running off a 320px phone
     (the card's own offset is 33px, which no viewport-only cap can know). */
  #content-wrapper #grms-awards-page .aw-toolbar .gl-dd__panel,
  #content-wrapper #grms-awards-page .aw-funders__form .gl-dd__panel { right: 0; width: auto; max-width: none; }
  #content-wrapper #grms-awards-page .aw-toasts { left: 16px; right: 16px; bottom: 16px; }
}

/* Add a grant's ways in, reached from the Grants list's "Add a grant" menu
   (#add-by-hand / #add-from-document / #add-from-url / #add-from-portal). The
   document panel is revealed by script, which makes its own jump. The jump clears the
   fixed 65px nav, and the card it lands on is marked so the reader sees which
   one they asked for. */
#add-by-hand, #add-from-url, #add-from-portal, #add-from-document { scroll-margin-top: 80px; }
#add-by-hand:target, #add-from-url:target, #add-from-portal:target, #add-from-document:target {
  box-shadow: 0 0 0 3px rgba(47, 134, 166, 0.22);
}

/* WG-435's design logo in the top bar (base.html, GRMS_V5_LOGOS). The design's
   42px; 32px on a phone, where its extra width pushed the logout icon past the
   right edge. `img.` because tailwind's sizing utilities sit at (0,1,0). */
img.grms-v5-logo { height: 42px; width: auto; max-width: 196px; object-fit: contain; }
@media (max-width: 640px) { img.grms-v5-logo { height: 32px; } }

/* =========================================================================
   ADD A GRANT  (WG-443..WG-449) — the UI/UX peer's design.

   THREE WAYS IN, SIDE BY SIDE. The page's own subtitle offers hand entry, a URL
   fetch and a portal import as equals, and the layout did not: the manual form
   ran the full width and the two import routes sat underneath it, below the
   fold of eighteen controls. They are a right-hand column now.

   AUTHORED IN PIXELS. theme-buzzrfp.css sets a 14px root ONLY between 1024px
   and 1439px, so `1rem` is 14px on a laptop and 16px on the 1920 screen this
   design was drawn on -- a rem translation renders a different design at each
   width. The numbers come from scanning the design's own render.

   BRAND IS A TOKEN. The section badges and the primary actions take the brand
   ramp, which WETCC re-tones green; the amber deadline tint is a status ink and
   stays literal, the same split the Effort Estimates block uses.
   ========================================================================= */

/* ---- the page header ---------------------------------------------------- */

/* `.lokentra-head` is a plain block here, so the "All grants" link stacked
   UNDER the subtitle instead of sitting opposite the title -- measured, not
   assumed: the link rendered at the same x as the heading. The other GRMS
   pages get their row from `.lokentra-head__bar`, which this page's markup
   never had. */
.gn-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.gn-head > div { min-width: 0; }

/* ---- the two columns ---------------------------------------------------- */

/* 70 / 30, measured: 1122px against 478px at a 1618px content column with a
   16px gutter. Proportional rather than fixed -- a funder's own name and a
   90-character title live in these fields, and a hardcoded 1122px overflows the
   column at any narrower viewport.

   `minmax(0, …)` on both tracks is load-bearing: a grid track's default minimum
   is `auto`, so one long unbroken string in an input would push the column
   wider than its share and the gutter would disappear. */
.gn-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.gn-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ---- the card ----------------------------------------------------------- */

/* NO BORDER, shadow only -- the same card language the Effort Estimates design
   uses, so the two redesigned pages agree. `.grms-card` pairs a 1px border WITH
   a shadow, which reads as two edges; this is why these do not simply reuse it.

   `overflow: hidden` keeps the header band and the footer band inside the
   rounded corners. */
.gn-card {
    background: var(--lokentra-surface, #fff);
    /* The design's card is radius 14 with a 1px edge, not 12 with only a
       shadow -- GRMS Add Grant.dc.html and --grms-radius-card agree. */
    border: 1px solid var(--grms-border, transparent);
    border-radius: var(--grms-radius-card, 12px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
    overflow: hidden;
    min-width: 0;
}
.gn-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--lokentra-line, #E3E8E7);
}
.gn-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--lokentra-ink, #1B2422);
}
.gn-card__icon { color: var(--lokentra-blue-600, #106088); font-size: 14px; }
/* ONE NUMBER FOR THE WHOLE VERTICAL RHYTHM. The gap above a section heading,
   and the padding the card body opens with, are the same measurement seen from
   two sides -- so they are one token. Written apart, they drifted to 20 and 26
   and the page read as unevenly spaced, which is exactly what was reported. */
.gn-card { --gn-sec-gap: 24px; }

.gn-card__body { padding: var(--gn-sec-gap, 24px) 24px 24px; }
.gn-card--side .gn-card__body { display: flex; flex-direction: column; gap: 12px; }

/* ---- the numbered sections ---------------------------------------------- */

/* A SPINE FOR A LONG FORM. Eighteen controls, one of them required, and nothing
   told a reader where they were. `#content-wrapper h3` is painted with
   `!important` inside two media queries (theme-buzzrfp.css:272/280), so the
   size here needs the same weight or the heading renders at the console's
   17-20px and the badge beside it looks undersized. */
#content-wrapper .gn-sec {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--gn-sec-gap, 24px) 0 12px;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    color: var(--lokentra-ink, #1B2422);
}

/* THE FIRST SECTION MUST NOT PAY TWICE. It is the card body's first child, so
   the body's own padding already spaces it off the header rule; its margin on
   top of that measured 46px against 26px everywhere else -- the one gap on
   this page a reader can see is wrong without a ruler.

   THIS RESET USED TO BE INERT, and the reason is the trap this console keeps
   hitting: it was written `.gn-card__body > .gn-sec:first-child` at (0,2,1)
   while the rule it must beat carries an ID at (1,1,0). The ID wins on
   specificity whatever the order, so the reset parsed, matched, and did
   nothing. It carries the same `#content-wrapper` here so it is (1,2,1) and
   actually wins -- and the guard resolves the cascade rather than grepping for
   the declaration, because the declaration was present all along. */
#content-wrapper .gn-card__body > .gn-sec:first-child { margin-top: 0; }

/* The badge takes the brand tint, so it re-tones with the tenant rather than
   rendering the mock's blue on every deployment. `flex: none` so a wrapped
   heading cannot squash the circle into an ellipse. */
.gn-sec__n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--lokentra-blue-50, #F2F7FB);
    color: var(--lokentra-blue-700, #0C4C6C);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- fields ------------------------------------------------------------- */

.gn-row { display: grid; gap: 12px; margin-bottom: 14px; }
.gn-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gn-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gn-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gn-field { display: block; min-width: 0; }
/* Consecutive notes are separate findings, not one paragraph: three of these
   can render together (people unavailable, no PI role, no departments) and at
   2px apart they read as a wall. */
.gn-note + .gn-note { margin-top: 4px; }
/* A note explains the row ABOVE it, so the next row needs its own air or the
   explanation reads as a label for the fields under it -- which is what it
   looked like with the category note sitting on Principal Investigator. */
.gn-note + .gn-row,
.gn-note + .gn-deadline { margin-top: 14px; }
.gn-field--wide { margin-bottom: 12px; }

.gn-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lokentra-ink-2, #3A4644);
}
.gn-label--strong { font-weight: 600; color: var(--lokentra-ink, #1B2422); }
/* The control carries a placeholder that names it, and the label is here for a
   screen reader -- a placeholder disappears the moment somebody types, so it is
   never on its own a name. */
.gn-label--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.gn-req { color: var(--color-danger, #b91c1c); }

/* The three fields whose explanation already lived in a `title` nothing
   signalled. `cursor: help` is the affordance; the text is unchanged. */
.gn-info {
    font-size: 11px;
    color: var(--lokentra-ink-3, #66716F);
    cursor: help;
}

.gn-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--lokentra-ink-3, #66716F);
}
.gn-note--lead { margin-bottom: 10px; }
.gn-note--warn { color: var(--color-warning, #a16207); }

/* ---- a refused create (WG-395) ----------------------------------------- *
 * The form used to answer a refusal by redirecting to the register with a
 * banner at the top of a DIFFERENT page, binning all 22 fields. It now comes
 * back with what was typed, so these are the marks that say which control to
 * look at. Tokens, never literals: WETCC re-tones the ramp, and a hardcoded red
 * would be the one stray colour on that tenant.
 *
 * The sentence is a SIBLING of the input inside the same <label>, so it sits
 * under the control it belongs to and moves with it on a narrow screen -- not
 * positioned, which would overlap the field below at 390px. */
.gn-formerr {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--color-danger, #b91c1c);
    border-radius: 8px;
    background: var(--color-danger-bg, #fef2f2);
    color: var(--color-danger, #b91c1c);
    font-size: 13px;
    line-height: 1.45;
}
.gn-formerr:focus { outline: 2px solid var(--color-danger, #b91c1c); outline-offset: 2px; }

.gn-err {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-danger, #b91c1c);
}
/* [hidden] is not in play here (the server omits the element entirely), but the
   display above would beat the UA rule if a caller ever added it -- the trap
   WG-122 records. Restated so that stays true. */
.gn-err[hidden] { display: none; }

.gn-input--bad,
.gn-input--bad:focus { border-color: var(--color-danger, #b91c1c); }

/* ---- Users, inside the GRMS console (WG-400) --------------------------- *
 * The page moved out of Administration, so it brings its own layout rather
 * than inheriting that console's. Tokens throughout: WETCC re-tones the brand
 * ramp green, and a literal would be the one stray colour on that tenant. */
.grms-users__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.grms-users__note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 16px;
    color: var(--color-danger, #b91c1c);
    font-size: 13px;
}

.grms-users__filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.grms-users__search { position: relative; flex: 1 1 22rem; min-width: 0; }
.grms-users__search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lokentra-ink-3, #66716F);
    font-size: 12px;
    pointer-events: none;
}
.grms-users__search input { padding-left: 30px; width: 100%; }
.grms-users__size { flex: 0 0 auto; }

/* The three filters as TABS, not three stray links in a row -- without this
   they render as the run-on text "All Admins Tenant admins". */
.grms-users__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--lokentra-line, #E3E8E6);
}
.grms-users__tab {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lokentra-ink-2, #4A5553);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
}
.grms-users__tab:hover { color: var(--lokentra-blue-700, #1F4D16); }
.grms-users__tab.is-on {
    color: var(--lokentra-blue-700, #1F4D16);
    border-bottom-color: var(--lokentra-blue-700, #1F4D16);
}

/* NO FIXED MIN-WIDTH ON THE TABLE, and no wrapper of its own. The card is the
   scroll container (see the template), exactly as the Reports register does it.
   A fixed 860px floor inside a nested scroller made the PAGE scroll sideways by
   42px at 849px -- measured, against the Grants register at the same width,
   which does not. Column floors live on the cells that need them instead, so
   the table grows only as far as its content demands. */
/* min-width: 0 IS THE FIX, and it is the whole fix. A scroll container that is
   also a flex or grid ITEM takes its automatic minimum size from its CONTENT,
   so the card grew to the table's full width and the PAGE scrolled sideways by
   42px at 849px even though the card was scrolling internally -- which is why
   hiding the table "fixed" it and setting overflow on it did not. */
/* THE TABLE FITS; IT DOES NOT SCROLL. A scroller was tried first and measured
   wrong: the shell's <main> is a flex item with flex-grow and flex-basis auto,
   so its base size is its content's MAX-CONTENT width -- the table pushed main
   wider and the PAGE scrolled 42px at 849px even with the card clipping
   correctly. Fixing that properly means putting min-width: 0 on a <main> shared
   by every console, which is not this ticket's to change.
   A table that fits needs none of it: cells WRAP instead, which is not the
   defect the ticket reported (headings clipped MID-WORD, unreadable) -- a
   wrapped heading is still a readable heading. */
.grms-users__card { min-width: 0; }
.grms-users__table { width: 100%; }
.grms-users__table th,
.grms-users__table td { overflow-wrap: anywhere; }
.grms-users__name { font-weight: 600; }
/* Only the two columns that genuinely need room; a blanket nowrap pushed the
   table to 1117px and made the overflow worse. */
.grms-users__table th:nth-child(2),
.grms-users__table td:nth-child(2) { min-width: 190px; }

.grms-users__role {
    display: inline-block;
    margin: 1px 4px 1px 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lokentra-blue-50, #EEF4EC);
    color: var(--lokentra-blue-800, #1F4D16);
    font-size: 11.5px;
    white-space: nowrap;
}

.grms-users__pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    white-space: nowrap;
}
.grms-users__pill--on { background: #E7F4EC; color: #157a4c; }
.grms-users__pill--off { background: #FBE9E9; color: var(--color-danger, #b91c1c); }
.grms-users__pill--admin {
    background: var(--lokentra-blue-50, #EEF4EC);
    color: var(--lokentra-blue-800, #1F4D16);
    margin-left: 4px;
}

.grms-users__open a { color: var(--lokentra-blue-700, #1F4D16); font-weight: 500; }
.grms-users__empty { text-align: center; color: var(--lokentra-ink-3, #66716F); padding: 24px 0; }

.grms-users__pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--lokentra-ink-2, #4A5553);
    flex-wrap: wrap;
}
.grms-users__pagelinks { display: flex; gap: 12px; }
.grms-users__pagelinks a { color: var(--lokentra-blue-700, #1F4D16); font-weight: 500; }

/* ---- the deadline, and the six that collapse ---------------------------- */

/* THE SECTION'S OWN SENTENCE SAYS THIS FIELD DECIDES whether the grant reaches
   the reminders, the digest and the calendar at all -- and it used to be the
   fourth of eight identical inputs. Amber, the ink this console uses for "look
   at this" everywhere else, and deliberately not red: an unset deadline is a
   gap rather than an error. */
.gn-deadline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #F6E6C8;
    border-radius: 10px;
    background: #FFF8EC;
}
.gn-deadline__i { color: var(--color-warning, #a16207); font-size: 12px; }

.gn-more { margin-top: 14px; }

/* A CLOSED <details> ENDS WITH ITS SUMMARY'S OWN PADDING. That 6px is the
   control's target size, not part of the gap -- so with every box gap equal at
   24px, the heading after this one still read 32.5px below the words above it
   where the others read 25.4px. Measured, not guessed, and it is the gap that
   was reported.

   Given back on the FOLLOWING heading rather than taken off the summary: the
   summary is a click target and shaving its padding to tidy a margin trades an
   accessibility floor for a pixel. Written under `#content-wrapper` for the
   same reason everything else on this page is -- `#content-wrapper .gn-sec`
   carries an ID at (1,1,0), so a plain `.gn-more + .gn-sec` at (0,2,0) would
   parse, match, and lose. This is (1,2,0). */
/* A HAIRLINE BETWEEN SECTIONS, FULL WIDTH OF THE CARD. The design bands each
   section and closes it with `border-bottom: 1px solid #edf0f4`; the same line
   seen from above is a border-top on every section but the first.

   THE GAP IS SPLIT IN HALF around it rather than added to, so the rhythm WG-451
   measured is unchanged: half above the line as margin, half below it as
   padding, and the line itself in the middle. The negative horizontal margins
   take it past the body's 24px padding so it meets both card edges, the way the
   card header's own rule does -- a divider that stops short of the edge reads as
   an underline on the heading instead of a separation between sections.

   (1,3,0), so it outranks `#content-wrapper .gn-sec` at (1,1,0). */
#content-wrapper .gn-card__body > .gn-sec:not(:first-child) {
    margin-top: calc(var(--gn-sec-gap, 24px) / 2);
    padding-top: calc(var(--gn-sec-gap, 24px) / 2);
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    border-top: 1px solid var(--grms-divider, var(--lokentra-line, #EDF0F4));
}

/* The closed <details> still leaves its summary's own 6px below the words, so
   the heading after it takes that much off ITS half. Raised to (1,4,0) to clear
   the rule above, which would otherwise win and undo the compensation. */
#content-wrapper .gn-card__body > .gn-more + .gn-sec:not(:first-child) {
    margin-top: calc(var(--gn-sec-gap, 24px) / 2 - 6px);
}
.gn-more__sum {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--lokentra-blue-700, #0C4C6C);
    cursor: pointer;
    list-style: none;
}
/* Safari draws its own triangle through ::-webkit-details-marker, which would
   sit beside the chevron below. */
.gn-more__sum::-webkit-details-marker { display: none; }
.gn-more__chev { font-size: 11px; transition: transform .15s ease; }
.gn-more[open] .gn-more__chev { transform: rotate(180deg); }
.gn-more__body { padding-top: 10px; }

/* ---- the card's footer -------------------------------------------------- */

/* The one commitment this page makes, and the note that qualifies it. It sat
   directly under the last field, so it landed wherever "How to submit" happened
   to end rather than where the eye finishes. */
.gn-foot {
    display: flex;
    align-items: center;
    /* The design keeps the note BESIDE the button, both at the right
       edge, rather than pushing them to opposite ends: the sentence
       qualifies the button, and a page-width gap between them reads as
       two unrelated things. flex-end + gap 14, per GRMS Add Grant. */
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 22px;
    border-top: 1px solid var(--lokentra-line, #E3E8E7);
    background: var(--lokentra-surface-alt, #FAFBFA);
}
.gn-foot .gn-note { margin: 0; }

/* DOCUMENTS (Add a grant, section 5). A dashed box; once the page's script has
   taken over (.is-enhanced) the real file input is laid invisibly over all of
   it, so a click, a drop and the keyboard reach the input itself, and the focus
   ring is drawn on the box. Before that -- scripting off, or no DataTransfer --
   the browser's own control stays VISIBLE in the box and says what it holds. */
.gn-drop {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 16px 18px;
    border: 1.5px dashed var(--lokentra-line-strong, #C5CFCC);
    border-radius: 12px;
    background: var(--lokentra-surface-alt, #FAFBFA);
}
.gn-drop.is-enhanced { cursor: pointer; }
.gn-drop:hover,
.gn-drop.is-over {
    border-color: var(--lokentra-blue-600, #0F5E85);
    background: var(--lokentra-blue-50, #EEF6FA);
}
.gn-drop:focus-within { outline: 2px solid var(--lokentra-blue-600, #0F5E85); outline-offset: 2px; }
.gn-drop__input { flex-basis: 100%; max-width: 100%; font-size: 13px; }
.gn-drop.is-enhanced .gn-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.gn-drop__icon { font-size: 16px; color: var(--lokentra-blue-700, #0C4C6C); }
.gn-drop__text { font-size: 14px; color: var(--lokentra-ink, #1B2422); }
.gn-drop__text strong { font-weight: 600; color: var(--lokentra-blue-700, #0C4C6C); }
.gn-drop__hint { flex-basis: 100%; font-size: 12px; color: var(--lokentra-ink-3, #66716F); }
.gn-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gn-files[hidden] { display: none; }
.gn-files__note { margin-top: 8px; }
.gn-files__note[hidden] { display: none; }
.gn-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 12px;
    border: 1px solid var(--lokentra-line, #E3E8E7);
    border-radius: 10px;
    background: #fff;
    font-size: 13.5px;
    color: var(--lokentra-ink, #1B2422);
}
.gn-file__icon { color: var(--lokentra-ink-3, #66716F); }
.gn-file__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gn-file__size { flex: none; font-size: 12px; color: var(--lokentra-ink-3, #66716F); font-variant-numeric: tabular-nums; }
.gn-file__x {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The console's 44px tap target (theme-buzzrfp.css holds every button to
       44px tall), square. */
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--lokentra-ink-2, #3A4644);
    cursor: pointer;
}
.gn-file__x:hover { background: #F1F4F3; color: #b42328; }

/* ---- Add a grant: extract from a document ------------------------------- *
 * A quiet band at the top of "Enter manually": it FILLS the form below, so it
 * reads as part of that card rather than as a fourth way to add a grant.
 * [hidden] is restated wherever a display is declared (the WG-122 trap): the
 * panel ships hidden and only the script reveals it. */
.gn-extract {
    margin: 0 0 var(--gn-sec-gap, 24px);
    padding: 14px 16px 12px;
    border: 1px solid var(--lokentra-line, #E3E8E7);
    border-radius: 12px;
    background: var(--lokentra-surface-alt, #FAFBFA);
}
.gn-extract[hidden] { display: none; }
.gn-extract__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--lokentra-ink, #1B2422);
}
.gn-extract__title i { font-size: 13px; color: var(--lokentra-blue-700, #0C4C6C); }
.gn-extract__lead { margin: 4px 0 12px; }
.gn-extract__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 12px; }
.gn-extract__file { flex: 0 1 260px; min-width: 0; }
.gn-extract__input { display: block; max-width: 100%; font-size: 13px; }
.gn-extract__or { align-self: center; padding-top: 18px; font-size: 12px; color: var(--lokentra-ink-3, #66716F); }
.gn-extract__link { flex: 1 1 260px; min-width: 0; }
.gn-extract__go { flex: none; }
.gn-extract__status:empty { display: none; }
.gn-extract__status { margin-top: 10px; }
.gn-extract__status.is-bad { color: var(--color-danger, #b91c1c); }
.gn-extract__carry { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.gn-extract__carry[hidden] { display: none; }
.gn-extract__drop {
    padding: 0 4px;
    border: 0;
    background: none;
    font: inherit;
    color: var(--lokentra-blue-700, #0C4C6C);
    text-decoration: underline;
    cursor: pointer;
}
/* A box the extraction filled, until the person types in it. A background
   IMAGE, not a colour: grms-v5.css pins every v5 input's background-color to
   white through a (1,5,3) selector, and a tint declared as a colour would lose
   on exactly the tenant this was built for. */
.gn-input--extracted {
    background-image: linear-gradient(var(--lokentra-blue-50, #EEF6FA), var(--lokentra-blue-50, #EEF6FA));
}
@media (max-width: 640px) {
    .gn-extract__or { padding-top: 0; }
    .gn-extract__file, .gn-extract__link, .gn-extract__go { flex-basis: 100%; }
}

/* The grant page's Document Checklist: documents filed under no required
   document (every one attached on Add a grant), each with a way to file it. */
.grms-unfiled { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lokentra-line, #E3E8E7); }
.grms-unfiled__head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--lokentra-ink, #1B2422); }
.grms-unfiled__n { padding: 0 7px; border-radius: 999px; background: #FFF4E0; color: #8f5c12; font-size: 12px; font-variant-numeric: tabular-nums; }
.grms-unfiled__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.grms-unfiled__name { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.grms-unfiled__form { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.grms-unfiled__select { max-width: 260px; font-size: 13px; }

/* ---- the import cards --------------------------------------------------- */

/* EACH SIDE CARD HAS ONE ACTION, AND IT SPANS THE CARD. Measured off the
   design: the button fills the card's whole content box (inset 20px either
   side of a 476px card). This shipped hugging its label instead -- 143px and
   181px inside a 355px content box -- because `align-self: flex-start` opted
   both buttons out of the stretch they would otherwise get from
   `.gn-card--side .gn-card__body`, which is a flex column.

   `width: 100%` as well as the stretch: .grms-btn is inline-flex, and an
   inline-flex child that is merely stretched still sizes to its content under
   some flows, so the stretch alone is not load-bearing enough to rely on.
   `justify-content: center` because a full-width button whose icon and label
   sit at the left edge reads as a mis-sized box rather than a wide button. */
#content-wrapper .gn-action {
    width: 100%;
    justify-content: center;
    /* The design's side-card action: 38px, radius 9px (GRMS Add
       Grant.dc.html). The theme floors #content-wrapper button at 44px at
       (1,0,1); this is (1,1,0) and clears it. Lowering the target used to
       be the theme owner's call to make -- WG-435 has now made it
       globally, taking buttons to 36px and inputs to 38px. */
    height: 38px;
    min-height: 38px;
    border-radius: var(--grms-radius-md, 9px);
    /* The design asks 700 here and grms-v5.css agrees on .grms-btn--primary,
       but a later v5 rule at far higher specificity re-asserts 600 and wins.
       Declaring 700 from this page would be an inert rule -- the exact trap
       WG-451 was about -- so it is left to WG-435 to settle globally. */
}

/* The grant scan's own fields (WG-375/377). `[hidden]` is restated because an
   author `display` rule beats the UA's whatever the specificity -- the WG-122
   lesson -- and this block ships hidden and is revealed per source. */
.gn-search { display: flex; flex-direction: column; gap: 10px; }
.gn-search[hidden] { display: none; }
.gn-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gn-presets[hidden] { display: none; }
.gn-presets .gn-label { margin-bottom: 0; }

/* ---- narrow screens ----------------------------------------------------- */

/* The import routes go BELOW the form rather than beside it -- which is where
   they were before this change, and is right at a width that cannot hold two
   columns. */
@media (max-width: 68rem) {
    .gn-grid { grid-template-columns: minmax(0, 1fr); }
    .gn-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
    .gn-row--2,
    .gn-row--3,
    .gn-row--4,
    .gn-deadline { grid-template-columns: minmax(0, 1fr); }
    .gn-card__head,
    .gn-card__body,
    .gn-foot { padding-left: 16px; padding-right: 16px; }
    .gn-foot { justify-content: stretch; }
}