/* WARNO shared shell + soft design system (v2). Loaded last on every page. */
:root { --r: 10px; --rs: 6px; --soft: #e3e8ef; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03); --accent-bg: #f6f1e4; }
body { background: var(--w-surface2, #f5f7fa) !important; background-image: none !important; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.main { min-width: 0; }

/* ---------- sidebar (permanent on desktop) ---------- */
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--w-surface, #fff); border-right: 1px solid var(--soft); padding: 14px 0 12px; display: flex; flex-direction: column; scrollbar-width: thin; }
.side .logo { padding: 2px 20px 12px; font-size: 23px; text-decoration: none; border: 0; }
.side h6 { font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--w-muted, #8a94a3); padding: 12px 20px 4px; margin: 4px 0 0; border: 0; }
.side a { display: flex; align-items: center; gap: 10px; margin: 1px 8px; padding: 6px 12px; border-radius: var(--rs); border: 0 !important; text-decoration: none; color: var(--w-text, #1f2733); font-family: inherit; font-size: 14px; font-weight: 450; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.side a span { flex: 1; min-width: 0; }
.side a:hover { background: var(--w-surface2, #f1f4f8); color: var(--w-text, #0b1019); }
.side a.on { background: var(--accent-bg); color: var(--w-text, #0b1019); font-weight: 600; }
.side a.on .ic { color: var(--obj2); }
.side a .ic { width: 17px; height: 17px; flex: none; color: var(--w-muted, #7a8594); }
.side a .pro { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--obj2); border: 1px solid rgba(184,134,31,.45); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.side a.cta { margin: 2px 12px 8px; padding: 9px 12px; justify-content: center; background: var(--w-strong, #0b1019); color: var(--w-on-strong, #fff); font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border-radius: 8px; }
.side a.cta:hover { background: var(--w-strong, #1d2a3a); color: var(--w-on-strong, #fff); }
.side a.cta .ic { color: var(--obj); }
.side .status { margin-top: auto; padding: 12px 20px 0; border-top: 1px solid var(--soft); font-family: var(--mono); font-size: 11px; color: var(--w-muted, #8a94a3); line-height: 1.8; }
.side .status a { display: inline; margin: 0; padding: 0; font-family: var(--mono); font-size: 11px; color: var(--w-muted, #8a94a3); background: none; }
.side .status a:hover { color: var(--w-text, #0b1019); background: none; }

/* ---------- top bar ---------- */
.top2 { position: sticky; top: 0; z-index: 30; background: var(--w-surface, rgba(255,255,255,.94)); backdrop-filter: blur(8px); border-bottom: 1px solid var(--soft); display: flex; align-items: center; gap: 12px; padding: 10px 24px; }
.top2 .btn { padding: 8px 14px; font-size: 11.5px; margin: 0; border-radius: var(--rs); }
.top2 .login { margin-left: auto; }
.mlogo, .mnu, .mscrim { display: none; }

/* ---------- soft surfaces: rounded, lighter borders ---------- */
.w, .bf, .nt .card, .sri, .filters, .srmsg, .lockbar, .doclist, .sheet, .about figure, .gd .cards > div, .gd .cta2, .gd .endcta, .gd .tbl, .gd .path, .plan, .tier, .pains > div, .pk > div, .recg > div, .stack span, .matrix, .mod, .board, .log, .theater svg, .legend, .phase, .steps, .dhero .box, .fmband, .paidbar, .turn, .showchips a, .chip, .pill, .cf input, .csx img, .ft, .bnav a, #pout, .q {
  border-radius: var(--r) !important; }
.w, .bf, .nt .card, .sri, .filters, .srmsg, .doclist, .sheet, .gd .cards > div, .plan, .tier, .pk > div, .pains > div, .matrix {
  border-color: var(--soft) !important; box-shadow: var(--shadow); }
.w, .nt .card, .matrix, .doclist, .sheet, .plan { overflow: hidden; }
.bf { border-top-width: 3px; }
.chip, .pill, .showchips a { border-radius: 999px !important; }
.btn, button, .asks button, .search button { border-radius: var(--rs) !important; }
input, select, textarea { border-radius: var(--rs) !important; }
.side, .top2 { box-shadow: none; }

/* page kicker instead of the old [symbol] badge */
.ov { display: block !important; }
.ovtag { position: static !important; display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--obj2) !important; margin: 0 0 8px !important; }
.ovtag b { display: none !important; }
.main footer { background: transparent; }
.main .wrap { box-sizing: border-box; padding-left: 36px !important; padding-right: 36px !important; max-width: 1180px; }
.main .wrap.ov { padding-top: 40px !important; }

/* slightly smaller type on desktop */
@media (min-width: 801px) { .main > *:not(.top2), .top2 > * { zoom: .92; } }

/* ---------- mobile ---------- */
@media (max-width: 800px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none !important; }
  .mlogo { display: flex; font-size: 20px; letter-spacing: .1em; margin-right: auto; text-decoration: none; }
  .top2 { padding: 10px 14px; gap: 8px; }
  .top2 a.btn.login, .top2 .btn.go { padding: 8px 12px; font-size: 11px; }
  .top2 .login { margin-left: 0; }
  .main .wrap { padding-left: 18px !important; padding-right: 18px !important; }
  .main .wrap.ov { padding-top: 24px !important; }
  .mnu { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 36px; padding: 0 9px; background: var(--w-surface, #fff); border: 1px solid var(--soft); border-radius: var(--rs); cursor: pointer; flex: none; }
  .mnu span { display: block; height: 2px; background: var(--paper); transition: transform .2s, opacity .2s; }
  body.mopen .mnu span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.mopen .mnu span:nth-child(2) { opacity: 0; } body.mopen .mnu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.mopen .side { display: flex !important; flex-direction: column !important; position: fixed !important; top: 62px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: min(250px, calc(100vw - 20px)) !important; height: auto !important; max-height: calc(100vh - 76px); overflow-y: auto !important; z-index: 60 !important; background: var(--w-surface, #fff); border: 1px solid var(--soft) !important; border-radius: 12px; box-shadow: 0 14px 40px rgba(15,30,50,.18) !important; padding: 6px 0 !important; white-space: normal !important; }
  body.mopen .side > .logo { display: none !important; }
  body.mopen .side h6 { display: block !important; padding: 8px 16px 2px !important; }
  body.mopen .side a { display: flex !important; padding: 7px 10px !important; margin: 1px 6px !important; font-size: 14px !important; border: 0 !important; white-space: normal !important; }
  body.mopen .side a.cta { margin: 4px 10px 4px !important; padding: 9px 12px !important; justify-content: center; font-size: 12px !important; }
  body.mopen .side .status { display: block !important; padding: 8px 16px !important; }
  body.mopen .side .status a { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; }
  body.mopen .mscrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(11,16,25,.35); }
}
.mini { display: none !important; }

/* paid accounts (Pro, Capture, trial): no upgrade prompts */
body.paid .lockbar, body.paid .locked, body.paid .srup, body.paid .side a.cta, body.paid .top2 .btn.go, body.paid .hcta { display: none !important; }

/* sidebar: Europe dropdown (0.8), region groups (0.9) */
.side details.sgrp { margin: 0; } .side details.sgrp > summary { list-style: none; display: flex; align-items: center; gap: 10px; margin: 1px 8px; padding: 6px 12px; border-radius: var(--rs); cursor: pointer; color: var(--w-text, #1f2733); font-size: 14px; font-weight: 450; line-height: 1.3; }
.side details.sgrp > summary::-webkit-details-marker { display: none; }
.side details.sgrp > summary:hover { background: var(--w-surface2, #f1f4f8); } .side details.sgrp > summary span { flex: 1; } .side details.sgrp > summary .ic { width: 17px; height: 17px; flex: none; color: var(--w-muted, #7a8594); }
.side .chev { width: 7px; height: 7px; border-right: 1.6px solid var(--w-line2, #8a94a3); border-bottom: 1.6px solid var(--w-line2, #8a94a3); transform: rotate(45deg); margin-top: -3px; transition: transform .15s; }
.side details.sgrp[open] > summary .chev { transform: rotate(-135deg); margin-top: 3px; }
.side details.sgrp.on > summary { background: var(--accent-bg); font-weight: 600; color: var(--w-text, #0b1019); }
.side a.sub { margin: 0 8px 0 35px; padding: 4px 10px; font-size: 13.5px; color: var(--w-text2, #3d4757); }
.side a.sub.on { background: var(--accent-bg); color: var(--w-text, #0b1019); font-weight: 600; }
body.mopen .side details.sgrp > summary { display: flex !important; padding: 7px 10px !important; margin: 1px 6px !important; }
body.mopen .side a.sub { margin-left: 30px !important; padding: 5px 10px !important; font-size: 13.5px !important; }
.side details.sgrp > summary::before, .side details.sgrp > summary::after { content: none !important; display: none !important; }
.side details.sgrp, .side details.sgrp > summary { border: 0 !important; background-image: none; }
.side details.sgrp { padding: 0 !important; }
.side .sublab { display: block; margin: 8px 8px 2px 35px; padding: 0 10px; font: 600 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--w-muted, #9aa3b0); }
body.mopen .side .sublab { margin-left: 30px !important; }

/* 0.9.10: log out, shown only when signed in; the top-bar button only on desktop */
html:not(.signedin) .side a.slogout, html:not(.signedin) .top2 .tlogout { display: none !important; }
.side a.slogout { color: var(--w-bad-text, #a3321f); } .side a.slogout .ic { color: var(--w-bad-text, #a3321f); }
@media (max-width: 800px) { .top2 .tlogout { display: none !important; } }
/* 0.9.10: World Map regions fold into their own small dropdowns */
.ssub { margin: 0; }
.ssub > summary { list-style: none; display: flex !important; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 500; color: var(--w-text, #1f2733) !important; }
.ssub > summary::-webkit-details-marker { display: none; }
.ssub > summary .chev { width: 6px; height: 6px; border-right: 1.6px solid var(--w-line2, #8a94a3); border-bottom: 1.6px solid var(--w-line2, #8a94a3); transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
.ssub[open] > summary .chev { transform: rotate(45deg); }
.ssub > summary:hover { background: var(--w-surface2, #f1f4f8); border-radius: var(--rs); }
.sub.sub2 { margin-left: 44px !important; font-size: 13px !important; color: var(--w-text2, #4a5566); }
.side details.ssub { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
.side details.ssub > summary { margin: 1px 8px 1px 30px !important; padding: 5px 10px !important; font: 500 13.5px/1.35 "Instrument Sans", "InstrumentSans", system-ui, sans-serif !important; text-align: left !important; letter-spacing: 0 !important; text-transform: none !important; border: 0 !important; background: none; min-height: 0 !important; color: var(--w-text, #1f2733) !important; }
.side details.ssub > summary::before, .side details.ssub > summary::after { content: none !important; display: none !important; }
.side details.ssub > summary:hover { background: var(--w-surface2, #f1f4f8) !important; }
.side a.sub.sub2, .side .sgrp a.sub.sub2 { margin-left: 48px !important; font-size: 13px !important; color: var(--w-text2, #4a5566); }
.side .sgrp > summary .pro { margin-left: auto; margin-right: 8px; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--obj2); border: 1px solid rgba(184,134,31,.45); border-radius: 4px; padding: 0 5px; line-height: 16px; } .side .sgrp > summary span { flex: 1; }

/* 0.9.10: smaller buttons everywhere (they were 13px/12x18 and shouted). Hero keeps a touch more room. */
.btn, button.btn, .xform .btn, .xsbtns .btn, .mx.foot .btn, .top2 .btn { padding: 7px 12px !important; font-size: 11px !important; letter-spacing: .06em !important; line-height: 1.3 !important; border-width: 1px !important; min-height: 0 !important; }
.hero .btn, .cta .btn { padding: 9px 15px !important; font-size: 11.5px !important; }
.xform .btn, #pricing .mx.foot .btn { min-height: 34px !important; }
@media (max-width: 600px) { .mx.foot .btn { padding: 8px 4px !important; font-size: 10px !important; } }
/* 0.9.10: tighter boxes on phones */
.kpis div, .kpis a.dbkl { padding: 10px 12px !important; } .kpis b { font-size: 20px !important; line-height: 1.15; } .kpis i { font-size: 10px !important; }
@media (max-width: 600px) { .dbc, .bdcard, .boards .bdcard { padding: 12px 13px 10px !important; border-radius: 10px !important; } .dbch h3 { font-size: 14px !important; letter-spacing: .05em; } .dbc p { font-size: 13.5px; } .kpis { gap: 8px; } #xfbtn { padding: 8px 12px !important; font-size: 11.5px !important; } }

/* #039: plan badges only for signed-out visitors */
html.signedin .side em.pn { display: none !important; }
/* ===== 7.46 menu rule (Site Designer, 3 Oct 2026; mailbox/from-design.md), parts 2 and 4. The row sizes are unchanged (part 1 comes with the
   7.47 type system; the phone drawer, part 5, with the mobile layer). The fold-by-height of desk.js is retired.
   2. Every group is closed by default; build.js opens the one holding the current page (never Contact / Account). A closed group is its title row.
   4. The menu fits the screen where the rule says it must; where it may not (a Learn or World Map page on a 768 / 720 px screen, or after the
      user opens a second group) it scrolls INSIDE itself: the logo and the footer line stay put and the page never scrolls because of the menu. */
/* nothing in the menu shrinks: the menu is a fixed-height flex column and the design layer gives its section labels min-height 0, so when the
   content was taller than the screen the labels collapsed and were drawn over the first item under them */
html body .side > * { flex-shrink: 0 !important; }
html body .side { overflow-y: auto !important; overflow-x: hidden; scrollbar-width: thin; }
/* the group hierarchy in one place (the design layer sets every .side a to margin 0 6px, which flattened it): a group's own entries and its
   region rows (World Map: Overview, United States, Commonwealth, Europe, Rest of World) start at the same indent; the entries inside a region
   sit one step deeper */
html body .side details.sgrp > a.sub, html body .side details.sgrp details.ssub > summary { margin-left: 28px !important; }
html body .side details.sgrp details.ssub > a.sub.sub2 { margin-left: 48px !important; }
@media (min-width: 801px) { /* the logo and the footer line stay put while the entries scroll; a hairline over the footer line says more is below */
  html body .side > a.logo { position: sticky; top: 0; z-index: 3; background: var(--w-surface, #fff); }
  html body .side > .status { position: sticky; bottom: 0; z-index: 3; background: var(--w-surface, #fff); }
  html.menu-more body .side > .status { box-shadow: 0 -1px 0 var(--w-line, #e3e8ee); }
}
/* phones (the menu as a panel, body.mopen): the group title starts 5 px further right there, so its entries and region rows follow */
html body.mopen .side details.sgrp > a.sub, html body.mopen .side details.sgrp details.ssub > summary { margin-left: 33px !important; }
html body.mopen .side details.sgrp details.ssub > a.sub.sub2 { margin-left: 53px !important; }

/* D1e: the CORE badge is smaller so long menu labels (Company Research, Contracting Offices, Generate Proposals) are not cut off */
.side a .pro, .side .sgrp > summary .pro { font-size: 8px; letter-spacing: 0; padding: 0 2px; line-height: 14px; }
.side a > span { min-width: 0; }
@media (min-width: 1280px) { html:not(.menuoff) body div.shell { grid-template-columns: 212px minmax(0, 1fr) !important; } html:not(.menuoff) body div.shell > .side { width: 212px !important; } }
/* phone header: the search box says "Search" instead of a clipped sentence */
@media (max-width: 760px) { html body .top .search > span, html body header .search > span { font-size: 0 !important; } html body .top .search > span::before, html body header .search > span::before { content: "Search"; font-size: 14px; } }