/* Structured Collaboration family bar, Send to menu and compact controls (register D53). Identical in every tool's repository.
   2.4.0 (with family.js 2.4.0): Help button and dialog, (i) explanations, Tools button on phones.
   2.5.0 (with family.js 2.5.0): the family name is a link to the structuredcollaboration.com home page; "Home" on phones.
   2.6.0 (with family.js 2.6.0): glossary terms with a dotted underline and their pop-up; Terms tab in Help (register D68).
   2.12.0 (with family.js 2.12.0): links 12px apart (was 14px), so the bar keeps one line at 1440px with Suggest.
   2.12.1: Suggest as a button that stands out: a white pill with a light bulb, and a red count when suggestions wait. */
.family { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 4px 20px; background: #1E4B55; font: 12px Arial, Helvetica, sans-serif; }
.family-name, .family a.family-name { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; color: #A9C7C9; margin-right: 4px; }
.family a.family-name:hover, .family a.family-name:focus-visible { color: #fff; border-bottom-color: #A9C7C9; }
.family-name .fn-short { display: none; }
.family a { font: inherit; color: #D7E6E7; text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.family a:hover { color: #fff; }
.family a[aria-current="page"] { color: #fff; font-weight: 700; border-bottom-color: #fff; }
.family a.soon { opacity: .7; }
.family .display, .family .help-btn { margin-left: auto; }
.family .display + .help-btn, .family .help-btn ~ .reg, .family .help-btn ~ a.all { margin-left: 0; }
.family .help-btn, .family .more { all: unset; cursor: pointer; padding: 2px 8px; font-size: 13px; color: #fff; font-weight: 700; }
.family .help-btn:hover, .family .help-btn:focus-visible, .family .more:focus-visible { text-decoration: underline; }
.family .more { display: none; }
.family span.reg { color: #A9C7C9; }
.family a.reg { color: #fff; font-weight: 700; }
dialog.sc-reg { max-width: 460px; width: calc(100% - 32px); border: 1px solid #C9B9A3; border-radius: 4px; padding: 20px 22px; font: 14px/1.5 Arial, Helvetica, sans-serif; color: #201E1D; box-shadow: 0 12px 40px rgba(32, 30, 29, .2); }
dialog.sc-reg::backdrop { background: rgba(32, 30, 29, .45); }
dialog.sc-reg h2 { font: 400 22px Georgia, serif; margin: 0 0 8px; }
dialog.sc-reg p { margin: 0 0 10px; color: #4A4541; }
dialog.sc-reg .sc-fine { font-size: 12.5px; color: #706A64; }
dialog.sc-reg .sc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sendto { position: relative; display: inline-flex; }
.send-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 380px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #C9B9A3; border-radius: 4px; box-shadow: 0 8px 24px rgba(32, 30, 29, .16); padding: 6px 0; text-align: left; }
.sm-head { padding: 6px 14px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4F7A80; }
.sm-note { padding: 2px 14px 6px; font-size: 12px; color: #706A64; line-height: 1.4; }
.sm-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; cursor: pointer; font-size: 13px; color: #201E1D; }
.sm-item:hover, .sm-item:focus-visible { background: #F1EADF; }
.sm-rank { width: 20px; flex: none; font-family: Georgia, serif; font-size: 15px; color: #1E4B55; text-align: center; }
.sm-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-text b { font-weight: 600; display: block; }
.sm-text small { display: block; color: #706A64; font-size: 12px; white-space: normal; }
.sm-tag { flex: none; font-size: 11.5px; font-weight: 600; color: #1E4B55; }
.sm-sep { border-top: 1px solid #E2D8C8; margin: 6px 0; }
dialog.sc-chg { max-width: 560px; }
.sc-chg-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 50vh; overflow: auto; border-top: 1px solid #E2D8C8; }
.sc-chg-list li { padding: 7px 0; border-bottom: 1px solid #E2D8C8; font-size: 13.5px; }
.sc-chg-list small { display: block; color: #706A64; font-size: 12px; }
.sc-note { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); background: #1E4B55; color: #fff; padding: 10px 16px; font: 13.5px/1.4 Arial, Helvetica, sans-serif; box-shadow: 0 8px 24px rgba(32, 30, 29, .2); }
.sc-note[hidden] { display: none; }
@media (max-width: 760px) { .family { padding: 4px 12px; gap: 2px 10px; } .family a.soon { display: none; } }
/* phones: the tool links fold behind Tools; the current tool, Help, the account and All tools stay */
@media (max-width: 640px) {
  .family-name .fn-long { display: none; }
  .family-name .fn-short { display: inline; }
  .family .more { display: inline-flex; padding-left: 0; }
  .family .more::after { content: ""; margin-left: 6px; align-self: center; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
  .family.open .more::after { border-top: 0; border-bottom: 4px solid currentColor; }
  .family > a:not([aria-current]):not(.reg):not(.all):not(.family-name):not(.sc-suggest) { display: none; }
  .family.open > a:not(.soon):not(.family-name), #family.open > a:not(.soon):not(.family-name) { display: inline-flex; flex: 0 0 44%; }
  .family .display, nav#family .display { display: none; }
  .family.open .display, nav#family.open .display { display: inline-flex; }
}
/* help on demand: explanations folded into an (i) when the person turns them off */
.sc-i { display: none; box-sizing: border-box; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 0 0 6px; padding: 0; border: 1.5px solid #4F7A80; border-radius: 50%; background: transparent; color: #1E4B55; font: italic 700 11px/1 Georgia, serif; cursor: pointer; vertical-align: 2px; flex: none; }
.sc-i:hover, .sc-i:focus-visible, .sc-i[aria-expanded="true"] { background: #1E4B55; border-color: #1E4B55; color: #fff; outline: none; }
html[data-help="off"] .sc-i, .sc-i.sc-i-always { display: inline-flex; }
html[data-help="off"] .sc-x { display: none !important; }
html[data-display="night"] .sc-i { border-color: #A9C7C9; color: #A9C7C9; }
.sc-pop { position: absolute; z-index: 80; box-sizing: border-box; background: #fff; color: #201E1D; border: 1px solid #C9B9A3; border-left: 3px solid #1E4B55; box-shadow: 0 8px 24px rgba(32, 30, 29, .18); padding: 10px 12px; font: 13px/1.45 Arial, Helvetica, sans-serif; text-align: left; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sc-pop[hidden] { display: none; }
.sc-pop * { font-size: inherit; color: inherit; margin: 0; }
dialog.sc-help { max-width: 560px; }
.sc-help-list { margin: 4px 0 12px; max-height: 52vh; overflow: auto; }
.sc-help-list dt { font-weight: 700; margin-top: 10px; color: #1E4B55; }
.sc-help-list dd { margin: 2px 0 0; color: #4A4541; }
.sc-help-links { font-size: 13px; }
.sc-help-switch { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid #E2D8C8; padding-top: 12px; margin-top: 4px; cursor: pointer; }
.sc-help-switch input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.sc-help-switch small { display: block; color: #706A64; font-size: 12.5px; font-weight: 400; }
html[data-display="night"] .sc-pop, html[data-display="night"] dialog.sc-reg { background: #292827; color: #F1ECE4; border-color: #5A5652; }
html[data-display="night"] dialog.sc-reg p, html[data-display="night"] .sc-help-list dd { color: #D5CEC4; }
html[data-display="night"] .sc-help-list dt { color: #A9C7C9; }
/* terms explained wherever they appear (2.6.0, register D68) */
.sc-term { border-bottom: 1px dotted #4F7A80; cursor: help; text-decoration: none; }
.sc-i.sc-i-corner { position: absolute; top: 0; right: 0; margin: 0; }
.sc-term:hover, .sc-term[aria-expanded="true"] { border-bottom-style: solid; border-bottom-color: #1E4B55; }
.sc-term:focus-visible { outline: 2px solid #1E4B55; outline-offset: 1px; }
html[data-display="night"] .sc-term { border-bottom-color: #A9C7C9; }
.sc-pop .sc-term-all { all: unset; display: inline-block; margin-top: 8px; color: #1E4B55; font-weight: 700; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.sc-pop small { color: #706A64; font-size: 12px; }
.sc-pop hr.sc-pop-sep { border: 0; border-top: 1px solid #E2D8C8; margin: 8px 0; }
html[data-display="night"] .sc-pop .sc-term-all { color: #A9C7C9; }
.sc-tabs { display: flex; gap: 4px; border-bottom: 1px solid #E2D8C8; margin: 0 0 12px; }
.sc-tabs [role=tab] { all: unset; cursor: pointer; padding: 6px 10px; font-size: 13px; font-weight: 600; color: #4A4541; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sc-tabs [role=tab][aria-selected="true"] { color: #1E4B55; border-bottom-color: #1E4B55; }
.sc-tabs [role=tab]:focus-visible { outline: 2px solid #1E4B55; }
.sc-term-find { box-sizing: border-box; width: 100%; padding: 6px 8px; border: 1px solid #C9B9A3; border-radius: 4px; font: 13px Arial, Helvetica, sans-serif; margin: 0 0 4px; }
.sc-term-list > div[hidden] { display: none; }
.sc-term-list > div.sc-hit { background: #F1EADF; margin: 0 -8px; padding: 0 8px 6px; }
.sc-term-list small { color: #706A64; }
html[data-display="night"] .sc-tabs [role=tab] { color: #D5CEC4; }
html[data-display="night"] .sc-tabs [role=tab][aria-selected="true"] { color: #A9C7C9; border-bottom-color: #A9C7C9; }
html[data-display="night"] .sc-term-list > div.sc-hit { background: #3A3836; }
/* 2.9.0: on narrower screens "All tools" gives way so the bar stays on one line (the Home link reaches the same page) */
@media (max-width: 1679px) { .family a.all, .family .display .dl { display: none; } }
@media (max-width: 1679px) { .family { gap: 2px 9px; padding: 4px 14px; } .family .sc-setup { margin-left: 2px; } .family-name, .family a.family-name { letter-spacing: .04em; } }
/* 2.9.0 the Set-up switch (build list 8bj, D102): set-up items are hidden while Set-up is off */
html.sc-setup-off [data-setup], html.sc-setup-off [data-act="add-team"], html.sc-setup-off [data-act="import-list"], html.sc-setup-off [data-act="lot-import"],
html.sc-setup-off [data-act="template"], html.sc-setup-off [data-act="go-tidy"], html.sc-setup-off [data-act="org-open"],
html.sc-setup-off button.tab[data-tab="organisation"][aria-selected="false"] { display: none !important; }
.family .sc-setup { all: unset; display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 2px 10px 2px 4px; border-radius: 12px; background: #F2B544; color: #1E4B55; font: 700 12px Arial, Helvetica, sans-serif; cursor: pointer; white-space: nowrap; }
.family .sc-setup:hover { filter: brightness(1.06); }
.family .sc-setup:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.family .sc-setup .sc-setup-t { width: 28px; height: 15px; border-radius: 8px; background: #1E4B55; position: relative; flex: none; }
.family .sc-setup .sc-setup-t::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: left .15s; }
/* off: the family's orange; on: red, so it is plain that set-up items are showing (Alex, 30 Oct 2026) */
.family .sc-setup.on { background: #C62828; color: #fff; }
.family .sc-setup.on .sc-setup-t { background: #7F1515; }
.family .sc-setup.on .sc-setup-t::after { left: 15px; background: #fff; }
.sc-setup-note { background: #FDF1D8; border-bottom: 1px solid #F2B544; color: #5A4410; font: 13px Arial, Helvetica, sans-serif; padding: 6px 20px; }
.sc-setup-note[hidden] { display: none; }
@media print { .family, .sendto, .sc-note, .sc-i, .sc-pop { display: none !important; } html[data-help="off"] .sc-x { display: block !important; } .sc-term { border-bottom: 0 !important; } }

/* 2.12.1: Suggest stands out from the links (8by, Alex 1 Nov 2026); 2.12.2: it sits in the page's own menu or toolbar */
a.sc-suggest { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: #0B5257; font: 700 13px/1.2 Arial, Helvetica, sans-serif; padding: 5px 13px 5px 10px; border-radius: 999px; border: 0; text-decoration: none; box-shadow: 0 0 0 2px rgba(255,255,255,.25); white-space: nowrap; align-self: center; }
a.sc-suggest svg { color: #C98A00; flex: none; }
a.sc-suggest:hover, a.sc-suggest:focus-visible { background: #FFF1CC; color: #0B5257; outline: none; box-shadow: 0 0 0 2px #FFD866; }
a.sc-suggest .sc-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #C0392B; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
/* on a light toolbar: filled teal, so it stands out there too */
a.sc-suggest.sc-suggest-light { background: #0B5257; color: #fff; box-shadow: none; }
a.sc-suggest.sc-suggest-light svg { color: #FFD866; }
a.sc-suggest.sc-suggest-light:hover, a.sc-suggest.sc-suggest-light:focus-visible { background: #083F43; color: #fff; box-shadow: 0 0 0 3px rgba(11,82,87,.25); }
.family a.sc-suggest { padding: 3px 11px 3px 8px; font-size: 12px; }
html[data-display="contrast"] a.sc-suggest, html[data-display="contrast"] a.sc-suggest.sc-suggest-light { background: #FFD866; color: #000; }
html[data-display="contrast"] a.sc-suggest svg { color: #000; }
@media print { a.sc-suggest { display: none !important; } }
.sc-suggest-slot:empty { display: none; }
.sc-suggest-slot { display: inline-flex; align-items: center; }
/* inside a page menu, the menu's own link styles must not reach the button */
[data-sc-suggest] a.sc-suggest, [data-sc-suggest] a.sc-suggest:visited { color: #0B5257 !important; background: #fff !important; padding: 5px 13px 5px 10px !important; border: 0 !important; text-decoration: none !important; font: 700 13px/1.2 Arial, Helvetica, sans-serif !important; }
[data-sc-suggest] a.sc-suggest:hover, [data-sc-suggest] a.sc-suggest:focus-visible { background: #FFF1CC !important; }
html[data-display="contrast"] [data-sc-suggest] a.sc-suggest { background: #FFD866 !important; color: #000 !important; }

/* ---------- 2.13.0: one teal band (Alex, 1 Nov 2026) ----------
   Under the family bar, every page has the same band: teal, 48px, the product's name on the left in white and the
   page's own actions on the right, with Suggest improvement as the white button among them. The browser tools'
   toolbar (header.topbar), the accounts and diagnostics header and CollabForce365's header (.site-header) all take it
   from here, so they stay identical. CollabForce365's application menu sits on a white strip under the band. */
header.topbar, .site-header { background: #0B5257 !important; color: #fff; border-bottom: 0 !important; }
header.topbar { min-height: 48px; box-sizing: border-box; padding-top: 6px !important; padding-bottom: 6px !important; }
.site-header .header-inner { min-height: 48px !important; padding-top: 4px; padding-bottom: 4px; }
header.topbar .brand, header.topbar .brand-text, header.topbar .brand-text strong, .site-header .brand, .site-header .brand span { color: #fff !important; }
header.topbar .brand-text small, .site-header .brand em { color: #98DDDE !important; }
header.topbar .brand-text strong, .site-header .brand { font-size: 19px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.site-header .brand em { font-size: 11px !important; }
/* the band's own buttons and links: white on teal; menus that open from them keep their light panels */
header.topbar .topbar-actions > .btn, header.topbar .topbar-actions > a.btn, header.topbar .topbar-actions > .sendto > .btn, header.topbar .topbar-actions > span > .btn {
  background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important; box-shadow: none !important; }
header.topbar .topbar-actions > .btn:hover, header.topbar .topbar-actions > a.btn:hover, header.topbar .topbar-actions > .sendto > .btn:hover, header.topbar .topbar-actions > span > .btn:hover { background: rgba(255,255,255,.14) !important; border-color: #fff !important; }
header.topbar .topbar-actions > .btn.primary { background: #fff !important; color: #0B5257 !important; border-color: #fff !important; }
header.topbar .topbar-actions > :not(.btn):not(.sendto):not(span) { color: #E8F6F6; }
header.topbar a.sc-suggest { margin-left: 4px; }
.site-header .nav:not(.menu-bar) > a, .site-header .nav:not(.menu-bar) > button.link, .site-header .nav:not(.menu-bar) form > button.link, .site-header .persona > a, .site-header .persona > span, .site-header .persona label, .site-header .nav:not(.menu-bar) > span:not(.sc-suggest-slot) { color: #E8F6F6 !important; }
.site-header .nav:not(.menu-bar) > a:hover, .site-header .persona > a:hover { color: #fff !important; }
.site-header .persona .btn-secondary { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important; }
.site-header .notices > summary, .site-header .notices summary svg, .site-header .menu-toggle { color: #fff !important; }
.site-header .menu-toggle { border-color: rgba(255,255,255,.55) !important; background: transparent !important; }
/* CollabForce365's application menu: a white strip under the band */
.site-header .header-inner .menu-bar { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); border-top: 0 !important; margin-top: 4px !important; padding: 4px 0 !important; }
.site-header:has(.menu-bar) { box-shadow: 0 1px 0 #C9D8DA; }
.site-header .menu-bar > a, .site-header .menu-bar > span, .site-header .menu-bar > details > summary, .site-header .menu-bar > form, .site-header .menu-bar label { color: #201E1D !important; }
.site-header .menu-bar > a:hover, .site-header .menu-bar > details > summary:hover { color: #0B5257 !important; }
.site-header .menu-bar > a.home { color: #fff !important; }
.site-header .menu-bar .team-pick, .site-header .menu-bar .team-pick select { color: #201E1D !important; }

/* 2.13.1: phones (Alex, 1 Nov 2026): the band shorter. The tool's name and a round light-bulb button share one line
   (the words stay for wider screens and for screen readers); a faint line separates the family bar from the band. */
@media (max-width: 640px) {
  .family { border-bottom: 1px solid rgba(255,255,255,.18); }
  /* the same two lines in every tool, whatever its name's length: the tools and Help, then Set-up and the account */
  .family::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
  .family > .sc-setup, .family > .reg, .family > a.all, .family > a.sc-suggest { order: 2; }
  .family > .sc-setup { margin-left: 0 !important; }
  header.topbar { row-gap: 6px !important; }
  header.topbar > .brand { order: 0; min-width: 0; }
  header.topbar > a.sc-suggest { order: 1; margin-left: auto !important; }
  header.topbar > .topbar-actions { order: 2; flex: 1 1 100%; margin-left: 0 !important; justify-content: flex-start !important; }
  header.topbar > .topbar-actions:empty { display: none; }
  a.sc-suggest, [data-sc-suggest] a.sc-suggest { position: relative; width: 36px; height: 36px; padding: 0 !important; justify-content: center; border-radius: 50%; flex: none; }
  a.sc-suggest > span { display: none; }
  a.sc-suggest svg { width: 18px; height: 18px; }
  a.sc-suggest .sc-count { position: absolute; top: -5px; right: -6px; box-shadow: 0 0 0 2px #0B5257; }
  /* CollabForce365: on a phone the bulb sits beside the bell and Menu; Try the demo, Display, Admin and Sign out
     show when Menu is opened, under the menu */
  .site-header div.persona { flex: 0 0 auto !important; order: 4 !important; }
  .site-header div.persona > :not(.sc-suggest-slot) { display: none !important; }
  .site-header:has(#mainMenu.open) div.persona { flex: 1 1 100% !important; order: 11 !important; padding: 6px 0 4px; }
  .site-header:has(#mainMenu.open) div.persona > :not(.here-now[hidden]) { display: revert !important; }
  .site-header .header-inner { position: relative; }
  .site-header .nav > .sc-suggest-slot { position: absolute; right: 16px; top: 6px; }
  .site-header .header-inner:has(.nav > .sc-suggest-slot:not(:empty)) > .brand { padding-right: 52px; }
}