/* site-ui001: desktop (1280 px and up) density and the left-menu toggle, on every page with the app shell. Loaded after shell.css and
   pages.css so it wins at equal specificity. Phones and tablets (below 1280 px) are unchanged. build.js step 4z2 links it on each page,
   adds class "listpage" to <body> on the results-list pages, and puts a tiny script in <head> that sets html.menuoff before first paint. */
.mtog { display: none; }
@media (min-width: 1280px) {
  /* left menu: narrow, 12 px items on 22 px rows, 10 px section labels; it must never need its own scrollbar (see the sections below) */
  .shell { grid-template-columns: 176px minmax(0, 1fr); }
  .side { padding: 4px 0 6px; position: sticky; overflow-y: hidden; }
  .side .logo { font-size: 18px; line-height: 1.1; padding: 2px 14px 3px; }
  .side h6 { font-size: 10px; line-height: 12px; padding: 4px 14px 1px; margin: 0; }
  .side a { font-size: 12px; line-height: 16px; padding: 3px 8px; margin: 0 6px; gap: 8px; }
  .side a .ic, .side summary .ic, .side details.sgrp > summary .ic { width: 14px; height: 14px; }
  .side a.cta { margin: 2px 8px 6px; padding: 6px 8px; font-size: 10.5px; }
  .side details.sgrp > summary { font-size: 12.5px !important; padding: 3px 8px !important; margin: 0 6px !important; gap: 8px !important; }
  .side details.ssub > summary { margin: 0 6px 0 24px !important; padding: 3px 8px !important; font-size: 12px !important; }
  .side details.sgrp a, .side details.ssub a { padding-top: 2px; padding-bottom: 2px; font-size: 12px; }
  .side .sublab { margin: 6px 6px 2px 24px; font-size: 9px; }
  .side .status { padding: 2px 14px 0; font-size: 10.5px; line-height: 1.4; }

  /* menu sections: every section is OPEN whenever the menu fits the window. Only when it would otherwise need a scrollbar does a section
     fold: LEARN first (html.fold-learn), then CONTACT and ACCOUNT (html.fold-ca; Account and Log out are also in the top bar). A guess
     from the window height is set in <head> before first paint; desk.js then measures the real menu and corrects it. A section the
     visitor opened or closed by hand (html.sec-<name>-open/closed, remembered) wins over the automatic folding, and the section holding
     the current page (h6.sec-here, from build.js) always stays open. The heading is a button (desk.js). */
  .side h6[data-sec] { cursor: pointer; }
  html.fold-learn:not(.sec-learn-open) .side h6[data-sec="learn"]:not(.sec-here) ~ :is(a, details):not(.side h6[data-sec="contact"] ~ *),
  html.sec-learn-closed .side h6[data-sec="learn"]:not(.sec-here) ~ :is(a, details):not(.side h6[data-sec="contact"] ~ *),
  html.fold-ca:not(.sec-contact-open) .side h6[data-sec="contact"]:not(.sec-here) ~ :is(a, details):not(.side h6[data-sec="account"] ~ *),
  html.sec-contact-closed .side h6[data-sec="contact"]:not(.sec-here) ~ :is(a, details):not(.side h6[data-sec="account"] ~ *),
  html.fold-ca:not(.sec-account-open) .side h6[data-sec="account"]:not(.sec-here) ~ :is(a, details),
  html.sec-account-closed .side h6[data-sec="account"]:not(.sec-here) ~ :is(a, details) { display: none; }
  .top2 { padding: 6px 16px; }
  .top2 .btn { padding: 6px 12px; font-size: 11px; }

  /* the toggle: one button in the top bar (always there, so the menu can come back) and one at the top of the menu */
  .mtog { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--soft, #e3e8ef); border-radius: 6px; background: var(--w-surface, #fff); color: var(--w-text2, #3b4656); cursor: pointer; }
  .mtog:hover { color: var(--w-text, #0b1019); border-color: var(--w-text, #0b1019); }
  .mtog:focus-visible { outline: 2px solid #b8861f; outline-offset: 2px; }
  .mtog.mside { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-color: transparent; }
  html.menuoff .shell { grid-template-columns: minmax(0, 1fr); }
  html.menuoff .side { display: none; }
  html.menuoff .top2 .mlogo { display: flex; margin-right: 0; font-size: 17px; }

  .side h6 .secb { all: unset; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; }
  .side h6 .secb:focus-visible { outline: 2px solid #b8861f; outline-offset: 2px; }
  .side h6 .secb i { font-style: normal; font-size: 9px; color: var(--w-muted, #9aa3b0); }

  body.listpage .dbhead h2 { font-size: 24px !important; } /* the dashboard greeting is set with !important in pages.css */
  /* results-list pages use the full width of the window */
  body.listpage .main .wrap { max-width: none; padding-left: 20px !important; padding-right: 20px !important; }
  body.listpage .main .wrap.ov { padding-top: 16px !important; }
  body.listpage .main .wrap h1, body.listpage .main .wrap > h2:first-child, body.listpage .main .wrap > div > h2:first-child, body.listpage .main h2#dbhi, body.listpage .main h2#coname, body.listpage .main h2#ofname, body.listpage .main h2#awtitle { font-size: 22px; line-height: 1.2; margin-bottom: 6px; letter-spacing: -.01em; } /* page titles (the template draws h2 at 32-56 px) */

  /* list-page header and filter form: compact, full width (the template caps lists and forms at 980 px) */
  body.listpage .phead { margin-bottom: 8px; } body.listpage .phead h2 { font-size: 22px; line-height: 1.2; margin: 0; letter-spacing: -.01em; } body.listpage .phead p { font-size: 13.5px; margin-top: 2px; max-width: none; }
  body.listpage .xform { max-width: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 10px; margin-bottom: 8px; }
  body.listpage .xform label { font-size: 10px; gap: 2px; }
  body.listpage .xform input, body.listpage .xform select { font-size: 13px; padding: 4px 8px; }
  body.listpage .xform .btn { padding: 6px 12px; font-size: 11px; }
  body.listpage .xmeta { font-size: 13px; margin: 2px 0 6px; min-height: 0; }
  body.listpage .xlist { max-width: none; padding: 4px; }
  body.listpage .pager { max-width: none !important; }

  /* card lists (SBIR, grants, Europe, protests ...): a thin line between results, title and details on one line, no description */
  body.listpage .xi { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 1px; margin: 0; padding: 5px 8px; border: 0; border-bottom: 1px solid var(--soft, #e3e8ef); border-radius: 0; box-shadow: none; background: var(--w-surface, #fff); }
  body.listpage .xi > a.t { flex: 0 0 calc(55% - 12px); min-width: 0; margin: 0; font: 600 13px/1.4 "Instrument Sans", "InstrumentSans", system-ui, sans-serif; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
  body.listpage .xi > .m { flex: 0 0 45%; min-width: 0; flex-wrap: nowrap; gap: 10px; overflow: hidden; white-space: nowrap; font-size: 12px; }
  body.listpage .xi > .m .chip2 { font-size: 10px; padding: 1px 6px; }
  body.listpage .xi > :not(a.t):not(.m) { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
  body.listpage .xi > :not(a.t):not(.m) .chip2 { font-size: 10px; padding: 1px 6px; }
  body.listpage .xi > p { display: none; }

  /* other result tables: smaller type, tight rows, one-line descriptions under names */
  body.listpage .main table:not(.hgt) th { font-size: 11.5px; padding: 5px 8px; }
  body.listpage .main table:not(.hgt) td { font-size: 13px; padding: 4px 8px; line-height: 1.35; }
  body.listpage .main table:not(.hgt) td small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; }
  body.listpage .main table td small.dsc { display: none; } /* no description lines in result lists (Koley); the text is in the row link's tooltip (desk.js) */
}
@media (min-width: 1280px) {
  /* dashboard (Reviewer, 2 Oct): same density as the lists. Cards tighter, "Coming due" / "What changed" one line per item with a small
     date chip, flatter calendar days, compact key-number cards. */
  body.listpage .dbgrid, body.listpage .dbcol { gap: 10px; }
  body.listpage .dbk { margin-bottom: 10px; }
  body.listpage .dbc { padding: 10px 14px; border-radius: 10px; }
  body.listpage .dbch { margin-bottom: 4px; } body.listpage .dbch h3 { font-size: 13px !important; }
  body.listpage .dbl li { padding: 4px 0; gap: 8px; align-items: center; }
  body.listpage .dbl li > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
  body.listpage .dbl li > div > a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  body.listpage .dbl li > div > small, body.listpage .dbl li > div > em { display: inline; flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
  body.listpage .dbd { width: auto; min-width: 46px; padding: 1px 6px; border-radius: 6px; display: flex; gap: 4px; align-items: baseline; justify-content: center; }
  body.listpage .dbd b { display: inline; font-size: 12px; } body.listpage .dbd small { display: inline; font-size: 10.5px; }
  body.listpage .dbkl { padding: 6px 10px; border-radius: 8px; }
  body.listpage .calg { gap: 3px; } body.listpage .cald { aspect-ratio: 2.4; font-size: 12px; } body.listpage .calnav button { height: 24px; width: 26px; font-size: 14px; }
}