/*
 * gr-programme-menu-workbench.css — scoped readability and operation layer for the
 * programme lead menu / assignment / projection workbench in GR-funder-portal.html.
 *
 * The funder portal ships legacy unlayered CSS, so this file does NOT rewrite the
 * portal: every rule is scoped to the workbench owner (.menus) and its entry control
 * (.menus-toggle). Retained non-owned areas keep their shipped type floor and palette,
 * regression-checked by tests/ui/programme-lead-menu-workbench.test.mjs.
 *
 * Brand book floor applied here: every owned visible word reads at 16px, every owned
 * control is a 44px target, focus shows the canonical 2px --border-focus ring
 * (including :focus-within on the outer element of native closed-shadow date inputs),
 * dense tables scroll inside labelled keyboard-reachable regions, and no owned motion
 * runs under prefers-reduced-motion.
 */

/* Canonical focus: the page imports marketing-tokens.css (--gr-operator-border-focus)
   and le-foundation.css (:root --border-focus). No local fallback value is invented
   here — rules read the canonical chain var(--border-focus, var(--gr-operator-border-focus)). */

/* Entry control — same link idiom as Schools / Inventory, read at the shared floor. */
.menus-toggle{ font-size:16px; min-height:44px; padding:11px 2px; display:inline-block; }

/* Everything the workbench renders — tables, forms, notes, empty and error states,
   and the MenuProjectionView output inside #pout_ — reads at 16px. */
.menus{ font-size:16px; line-height:1.5; }
.menus :is(p, h4, li, summary, strong, .msg, .sub, .banner){ font-size:16px; }
.menus label{ font-size:16px; color:var(--muted); }
.menus table{ font-size:16px; }
.menus th{ font-size:16px; }
.menus th, .menus td{ white-space:nowrap; }
.menus :is(input, select){ font-size:16px; min-height:44px; padding:10px 11px; }
.menus button{ font-size:16px; min-height:44px; }
.menus button.link{ padding:11px 2px; }
.menus summary{ display:inline-flex; align-items:center; min-height:44px; }

/* Native closed-shadow date segments: the outer input carries the canonical ring. */
.menus :is(button, input, select, summary, [tabindex]):focus-visible,
.menus input:focus-within,
.menus-toggle:focus-visible{ outline:2px solid var(--border-focus, var(--gr-operator-border-focus)); outline-offset:2px; }

/* Dense programme tables scroll inside labelled, keyboard-reachable regions. */
.menus .gr-menu-scroll{ overflow-x:auto; }
.menus [id^="pout_"]{ overflow-x:auto; }

@media (prefers-reduced-motion: reduce){
  .menus, .menus *, .menus-toggle{ transition:none !important; animation:none !important; }
}