/* WEAVE OR shared UI layer (UI refinement, 2026-10-08). Loads after style.css / custom.css and reads the variables of tokens.css.
 *
 * Step 1 covers: the focus ring, icons, the navigation bar and its menus, the account menu, and the common button / field behaviour.
 * It keeps the geometry the site has always had (38px bar, same items in the same order, same menu structure); it only tidies how it looks and behaves.
 * To undo it: remove the three <link>/<script> lines for tokens.css, ui.css and ui.js in templates/master.html (the old rules are untouched underneath).
 */

/* ------------------------------------------------------------------ base: selection, focus, motion, skip link */
::selection { background: rgba(74, 157, 181, 0.28); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--wo-focus); outline-offset: 2px; border-radius: 3px;
}
#content [tabindex="-1"]:focus { outline: none; }
.wo-skip { position: absolute; left: 12px; top: -48px; z-index: 20000; background: var(--wo-teal-900); color: #fff !important; padding: 9px 16px; border-radius: 0 0 var(--wo-radius-sm) var(--wo-radius-sm); font: 600 var(--wo-text-md) var(--wo-font); text-decoration: none; box-shadow: var(--wo-shadow-md); transition: top var(--wo-fast); }
.wo-skip:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }

/* ------------------------------------------------------------------ icons (Lucide sprite, templates/icons.html) */
.wo-ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.16em; }
.wo-ic--sm { width: 14px; height: 14px; }
.wo-ic--md { width: 16px; height: 16px; }
.wo-ic--lg { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ navigation bar: same bar, same items, calmer behaviour */
#mainmenu.navbar { font-family: var(--wo-font); }
#mainmenu a#barcontents, #mainmenu button.dropbtn {
  display: flex !important; align-items: center; gap: 5px; height: 38px !important; line-height: 1 !important; padding: 0 11px !important; margin: 0;
  font-family: var(--wo-font); font-size: var(--wo-text-sm) !important; font-weight: 500; letter-spacing: 0.1px; color: #fff !important; text-decoration: none; cursor: pointer;
  background: transparent; border: 0; border-radius: 0; position: relative; transform: none !important;
  transition: background-color var(--wo-fast);
}
#mainmenu a#barcontents:hover, #mainmenu button.dropbtn:hover, #mainmenu .dropdown.show > button.dropbtn { background: rgba(255, 255, 255, 0.13) !important; transform: none !important; }
#mainmenu a#barcontents:focus-visible, #mainmenu button.dropbtn:focus-visible { outline: 2px solid var(--wo-focus-on-dark); outline-offset: -3px; border-radius: 0; }
/* where you are: a bar under the item, inside the 38px, never shifting the text */
#mainmenu a#barcontents.active { background: rgba(255, 255, 255, 0.12) !important; border-bottom: 0 !important; box-shadow: inset 0 -3px 0 var(--wo-accent-on-dark); }
#mainmenu .partition { height: 18px !important; margin: 10px 6px !important; background: transparent !important; border: 0 !important; border-left: 1px solid rgba(255, 255, 255, 0.28) !important; }
#mainmenu .dropdown { position: relative; }
#mainmenu .wo-caret { width: 12px; height: 12px; opacity: 0.85; transition: transform var(--wo-med); margin-left: 1px; }
#mainmenu .dropbtn[aria-expanded="true"] .wo-caret { transform: rotate(180deg); }

/* menus: a white panel, comfortable rows, the current page marked at the left */
#mainmenu .dropdown-content {
  background: var(--wo-surface) !important; min-width: 230px !important; top: calc(100% + 2px) !important; left: 0 !important; padding: 6px !important;
  border: 1px solid var(--wo-line) !important; border-radius: var(--wo-radius-md) !important; box-shadow: var(--wo-shadow-lg) !important; overflow: visible !important;
  font-family: var(--wo-font); line-height: 1.3; margin-top: 0 !important;
}
#mainmenu .dropdown.show .dropdown-content, #mainmenu .dropdown-content.show { display: block !important; animation: wo-menu-in var(--wo-med) both; }
@keyframes wo-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#mainmenu .dropdown-content a {
  display: flex !important; align-items: center; gap: 10px; box-sizing: border-box; min-height: 36px; height: auto; padding: 8px 12px !important; margin: 1px 0; border-radius: var(--wo-radius-sm);
  color: var(--wo-ink) !important; font-size: var(--wo-text-md); font-weight: 500; line-height: 1.3 !important; text-decoration: none !important; white-space: nowrap;
  background: transparent !important; position: relative; transition: background-color var(--wo-fast), color var(--wo-fast); border: 0 !important;
}
#mainmenu .dropdown-content a:hover, #mainmenu .dropdown-content a:focus-visible { background: var(--wo-teal-50) !important; color: var(--wo-teal-700) !important; padding-left: 12px !important; }
#mainmenu .dropdown-content a:focus-visible { outline: 2px solid var(--wo-focus); outline-offset: -2px; }
#mainmenu .dropdown-content a.active, #mainmenu .dropdown-content a[aria-current="page"] { background: var(--wo-teal-50) !important; color: var(--wo-teal-700) !important; font-weight: 600; }
#mainmenu .dropdown-content a.active::before, #mainmenu .dropdown-content a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--wo-teal-500); }
#mainmenu .dropdown-content a .wo-ic { color: var(--wo-teal-700); opacity: 0.85; }
#mainmenu .dropdown-content .wo-menu-sep { height: 1px; margin: 6px 4px; background: var(--wo-line); border: 0; }
#mainmenu .dropdown-content a.wo-danger:hover { background: var(--wo-danger-bg) !important; color: var(--wo-danger) !important; }
#mainmenu .dropdown-content a.wo-danger:hover .wo-ic { color: var(--wo-danger); }

/* ------------------------------------------------------------------ account: avatar + name, a menu with a header (same entries and permissions as before) */
#mainmenu .wo-account { gap: 8px !important; padding: 0 8px 0 10px !important; }
.wo-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; font: 700 10px/1 var(--wo-font); letter-spacing: 0.3px; }
.wo-account-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mainmenu #loginDropdown.dropdown-content { left: auto !important; right: 0; min-width: 270px !important; }
.wo-menu-head { display: flex !important; align-items: center; gap: 12px; padding: 10px 12px 12px 12px; margin: 0 !important; border-bottom: 1px solid var(--wo-line); margin-bottom: 6px !important; }
.wo-menu-head .wo-avatar--lg { width: 40px; height: 40px; font-size: 14px; background: linear-gradient(135deg, var(--wo-teal-700), var(--wo-teal-900)); border: 0; color: #fff; }
.wo-menu-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wo-menu-name { font-size: var(--wo-text-md); font-weight: 700; color: var(--wo-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-menu-mail { font-size: var(--wo-text-sm); color: var(--wo-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-pill { align-self: flex-start; display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--wo-teal-700); background: var(--wo-teal-50); border: 1px solid var(--wo-teal-100); border-radius: var(--wo-radius-pill); padding: 1px 8px; }

/* ------------------------------------------------------------------ buttons and fields: shared behaviour only (each page keeps its own colours and sizes for now) */
.btn-submit, .btn-request, .btn-download, .btn-reset, .tf-btn, .pr-btn, .ml-btn, .wu-btn, .oe-btn, .det-reset-btn,
input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"] {
  transition: background-color var(--wo-fast), border-color var(--wo-fast), box-shadow var(--wo-fast), transform var(--wo-fast), opacity var(--wo-fast), color var(--wo-fast);
}
.btn-submit:active, .btn-request:active, .btn-download:active, .btn-reset:active, .tf-btn:active, .pr-btn:active, .ml-btn:active, .wu-btn:active, .oe-btn:active, .det-reset-btn:active { transform: translateY(1px); }
.btn-submit:focus-visible, .btn-request:focus-visible, .btn-download:focus-visible, .btn-reset:focus-visible, .tf-btn:focus-visible, .pr-btn:focus-visible, .ml-btn:focus-visible, .wu-btn:focus-visible, .oe-btn:focus-visible, .det-reset-btn:focus-visible,
input[type="submit"]:focus-visible, input[type="button"]:focus-visible, button[type="submit"]:focus-visible { outline: 3px solid rgba(43, 138, 163, 0.55); outline-offset: 2px; box-shadow: none; }
button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, .btn-submit:disabled, .btn-download:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  border-color: var(--wo-teal-500); box-shadow: var(--wo-ring); outline: none;
}
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--wo-teal-700); }
::placeholder { color: #8a9ba5; opacity: 1; }


/* ================================================================== step 2: small screens (the desktop layout above 900px is untouched) */
.wo-burger { display: none; }
@media (max-width: 900px) {
  html body { min-width: 0 !important; width: auto !important; }
  html { background-size: cover; }
  html body #header { height: 92px !important; margin: 6px 6px 0 6px !important; overflow: hidden !important; }
  html body #header h1 { font-size: 19px !important; line-height: 1.15; padding-top: 28px !important; padding-left: 96px !important; padding-right: 76px !important; }
  html body #header img[src*="weave_logo"] { width: 74px !important; padding: 8px 0 0 6px !important; }
  html body #header img.camcead-logo { max-height: 54px !important; width: auto !important; padding: 12px 8px 0 0 !important; }
  #content { margin: 0 6px 8px 6px !important; padding: 8px !important; }
  img, canvas, video, iframe { max-width: 100%; }
  /* the bar: a menu button, the account at the right, the items below when opened */
  .main-wrapper, .main-content, .sidebar-wrapper { display: block !important; width: auto !important; padding-right: 0 !important; }
  #content form, #content fieldset { max-width: 100%; box-sizing: border-box; }
  #content label, #content code, #content pre { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
  #content input[type=text], #content input[type=search], #content select, #content textarea { max-width: 100%; box-sizing: border-box; }
  #content [style*="width: 1200px"], #content [style*="width:1200px"], #content [style*="width: 1100px"], #content [style*="width:1100px"], #content [style*="width: 1024px"], #content [style*="width:1024px"], #content [style*="width: 1000px"], #content [style*="width:1000px"], #content [style*="width: 960px"], #content [style*="width:960px"], #content [style*="width: 940px"], #content [style*="width:940px"], #content [style*="width: 900px"], #content [style*="width:900px"], #content [style*="width: 850px"], #content [style*="width:850px"], #content [style*="width: 800px"], #content [style*="width:800px"], #content [style*="width: 768px"], #content [style*="width:768px"], #content [style*="width: 720px"], #content [style*="width:720px"], #content [style*="width: 700px"], #content [style*="width:700px"], #content [style*="width: 680px"], #content [style*="width:680px"], #content [style*="width: 650px"], #content [style*="width:650px"], #content [style*="width: 600px"], #content [style*="width:600px"], #content #tabs, #content #modeltable { width: auto !important; max-width: 100% !important; box-sizing: border-box; }
  #content input[style*="visibility:hidden"], #content input[style*="visibility: hidden"] { position: absolute !important; left: 0 !important; right: auto !important; float: none !important; width: 1px !important; height: 1px !important; }
  #content #tabs, #content .ui-tabs { overflow-x: auto; }
  #content .version-selector, #content .version-selector form { flex-wrap: wrap; max-width: 100%; }
  #content .version-selector select { min-width: 0; max-width: 100%; }
  .wo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .wo-crumbs { padding: 6px 4px 0 4px; }
}
@media (max-width: 1000px) {
  #mainmenu { margin: 0 6px !important; height: auto !important; min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; }
  #mainmenu .wo-burger { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin: 0; border: 0; background: transparent; color: #fff; font: 600 var(--wo-text-md) var(--wo-font); cursor: pointer; order: 0; }
  #mainmenu .wo-burger:hover { background: rgba(255, 255, 255, 0.13); }
  #mainmenu .wo-burger .wo-ic { width: 20px; height: 20px; }
  #mainmenu .wo-navuser { order: 1; margin-left: auto; float: none !important; }
  #mainmenu .wo-navmain, #mainmenu .wo-navuser { height: auto !important; line-height: normal !important; }
  #mainmenu .wo-navmain .dropdown { float: none !important; display: block !important; }
  #mainmenu .wo-navmain { order: 3; width: 100%; display: none; flex-direction: column; float: none !important; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 4px 0 8px 0; }
  #mainmenu.wo-nav-open .wo-navmain { display: flex; }
  #mainmenu .wo-navmain > * { float: none !important; width: 100%; }
  #mainmenu .wo-navmain .dropbtn, #mainmenu .wo-navmain a#barcontents { float: none !important; }
  #mainmenu .wo-navmain .partition { display: none !important; }
  #mainmenu .wo-navmain a#barcontents, #mainmenu .wo-navmain button.dropbtn { width: 100%; height: 44px !important; justify-content: space-between; padding: 0 14px !important; font-size: var(--wo-text-md) !important; }
  #mainmenu .wo-navmain .dropdown { width: 100%; }
  #mainmenu .wo-navmain .dropdown-content { position: static !important; min-width: 0 !important; margin: 0 8px 6px 8px !important; box-shadow: none !important; border-radius: var(--wo-radius-sm) !important; }
  #mainmenu .wo-navuser #loginDropdown { position: absolute !important; right: 0; left: auto !important; width: min(300px, calc(100vw - 20px)); max-width: calc(100vw - 20px) !important; }
  .wo-account-name { max-width: 96px; }
}
/* between 1001 and 1180 px the desktop layout stays, but no longer forces a 1180px minimum: the bar just gets a little tighter */
@media (max-width: 1180px) { html body { min-width: 0 !important; } }
@media (min-width: 1001px) and (max-width: 1180px) { #mainmenu a#barcontents, #mainmenu button.dropbtn { padding: 0 8px !important; } .wo-account-name { max-width: 110px; } #mainmenu .partition { margin: 10px 3px !important; } }
@media (max-width: 480px) { .wo-account-name { display: none; } html body #header h1 { font-size: 16px !important; padding-left: 88px !important; padding-right: 64px !important; } }

/* ================================================================== step 3: tables (colours and meanings of statuses are never touched) */
/* a row under the pointer is tinted by an overlay, so cells keep their own (status) colours */
.wo-table tbody tr:hover > td, .wo-table tbody tr:hover > th { box-shadow: inset 0 0 0 9999px rgba(40, 101, 113, 0.07); }
.wo-table tbody tr:focus-within > td { box-shadow: inset 0 0 0 9999px rgba(40, 101, 113, 0.07); }
.wo-table th { position: relative; }
.wo-table th[aria-sort] { cursor: pointer; }
/* compact density (opt-in, account menu): tighter cells in every table that is marked by ui.js */
:root[data-density="compact"] .wo-table td, :root[data-density="compact"] .wo-table th { padding-top: 4px !important; padding-bottom: 4px !important; }
:root[data-density="compact"] .wo-table td { padding-left: 6px !important; padding-right: 6px !important; line-height: 1.25; }
:root[data-density="compact"] .row-action { width: 22px; height: 22px; }
:root[data-density="compact"] .row-action svg { width: 12px; height: 12px; }
.row-action:focus-visible, .explorer-pill:focus-visible { outline: 3px solid var(--wo-focus); outline-offset: 2px; opacity: 1; }
.wo-table-note { font-size: var(--wo-text-xs); color: var(--wo-mute); margin: 4px 2px; }
/* status indicators for new content: the same dot + words, never colour alone */
.wo-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--wo-mute); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); }
.wo-dot--ok { background: var(--wo-ok); } .wo-dot--warn { background: #e0a100; } .wo-dot--bad { background: var(--wo-danger); } .wo-dot--info { background: var(--wo-teal-500); }
.wo-pill--ok { color: var(--wo-ok); background: var(--wo-ok-bg); border-color: transparent; } .wo-pill--warn { color: var(--wo-warn); background: var(--wo-warn-bg); border-color: transparent; }
.wo-pill--bad { color: var(--wo-danger); background: var(--wo-danger-bg); border-color: transparent; } .wo-pill--info { color: var(--wo-info); background: var(--wo-info-bg); border-color: transparent; }

/* ================================================================== step 4: copy buttons, tooltips, help buttons, notifications, loading */
.wo-copy { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 0 0 4px; padding: 0; vertical-align: middle; border: 1px solid transparent; border-radius: var(--wo-radius-sm); background: transparent; color: var(--wo-mute); cursor: pointer; opacity: 0; transition: opacity var(--wo-fast), background-color var(--wo-fast), color var(--wo-fast); }
.wo-copy .wo-ic { width: 13px; height: 13px; }
tr:hover .wo-copy, .wo-copy:focus-visible, td:focus-within .wo-copy, [data-copy]:hover > .wo-copy, [data-copy]:focus-within > .wo-copy { opacity: 1; }
.wo-copy:hover { background: var(--wo-teal-50); color: var(--wo-teal-700); border-color: var(--wo-teal-100); }
.wo-copy.wo-copied { opacity: 1; color: var(--wo-ok); background: var(--wo-ok-bg); }
@media (hover: none) { .wo-copy { opacity: 0.75; } }

.wo-tip { position: fixed; z-index: 30000; max-width: 280px; padding: 6px 10px; border-radius: var(--wo-radius-sm); background: var(--wo-teal-900); color: #fff; font: 500 var(--wo-text-sm)/1.35 var(--wo-font); box-shadow: var(--wo-shadow-md); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity var(--wo-fast), transform var(--wo-fast); }
.wo-tip.wo-tip--on { opacity: 1; transform: none; }
.ui-tooltip { border-radius: var(--wo-radius-sm) !important; border: 1px solid var(--wo-line) !important; box-shadow: var(--wo-shadow-md) !important; font-family: var(--wo-font); font-size: var(--wo-text-sm); }

/* the "?" help buttons of the query forms: reachable and readable by keyboard and touch too (their own look stays) */
.tooltip:focus-within .tooltiptext, .tooltip:focus-within .tooltiptextleft, .tooltip.wo-open .tooltiptext, .tooltip.wo-open .tooltiptextleft { visibility: visible; }
.tooltip > .help-icon:focus-visible { outline: 3px solid var(--wo-focus); outline-offset: 2px; }

/* notifications: one calm style for the flash messages (same place, same width, same four kinds) and for the toasts */
#flash { font-family: var(--wo-font); }
#flash div, .notice {
  position: relative; padding: 14px 44px 14px 52px !important; border-radius: var(--wo-radius-md); border: 1px solid transparent; box-shadow: var(--wo-shadow-sm);
  font-size: var(--wo-text-lg) !important; font-weight: 600; line-height: 1.4; background-image: none !important; color: var(--wo-ink);
}
#flash .ok { background: var(--wo-ok-bg) !important; border-color: #b7e0c6; } #flash .warning { background: var(--wo-warn-bg) !important; border-color: #f1d58a; }
#flash .error { background: var(--wo-danger-bg) !important; border-color: #efb9b2; } #flash .alert, #flash .info, .notice { background: var(--wo-info-bg) !important; border-color: #bcdcf3; }
#flash div::before, .notice::before { content: ""; position: absolute; left: 16px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: currentColor; -webkit-mask: var(--wo-flash-icon) center/contain no-repeat; mask: var(--wo-flash-icon) center/contain no-repeat; }
#flash .ok::before { color: var(--wo-ok); --wo-flash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
#flash .warning::before { color: #b26a00; --wo-flash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
#flash .error::before { color: var(--wo-danger); --wo-flash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }
#flash .alert::before, #flash .info::before, .notice::before { color: var(--wo-info); --wo-flash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.wo-flash-x { position: absolute; right: 8px; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: 0.6; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wo-flash-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.07); }
@media (max-width: 900px) { #flash, .notice { width: auto !important; } }

.wo-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 30000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; max-width: calc(100vw - 24px); }
.wo-toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--wo-radius-md); background: var(--wo-teal-900); color: #fff; font: 600 var(--wo-text-md)/1.3 var(--wo-font); box-shadow: var(--wo-shadow-lg); animation: wo-toast-in var(--wo-med) both; pointer-events: auto; }
.wo-toast .wo-ic { color: var(--wo-accent-on-dark); width: 16px; height: 16px; }
.wo-toast--bad .wo-ic { color: #ffb4a9; }
.wo-toast.wo-toast--out { opacity: 0; transform: translateY(6px); transition: opacity var(--wo-med), transform var(--wo-med); }
@keyframes wo-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* loading: one spinner, a thin progress line while a page loads, and the pressed button shows it is working */
.wo-spinner, .spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--wo-teal-100); border-top-color: var(--wo-teal-700); animation: wo-spin 0.8s linear infinite; display: inline-block; }
@keyframes wo-spin { to { transform: rotate(360deg); } }
.wo-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 40000; background: linear-gradient(90deg, var(--wo-teal-500), var(--wo-accent-on-dark)); box-shadow: 0 0 8px rgba(74, 157, 181, 0.7); opacity: 0; transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity var(--wo-med); pointer-events: none; }
.wo-progress.wo-progress--on { width: 88%; opacity: 1; }
.wo-loading { cursor: progress !important; animation: wo-pulse 1s ease-in-out infinite; }
@keyframes wo-pulse { 50% { opacity: 0.6; } }

/* ================================================================== step 5: breadcrumbs, preferences (dark mode, table density) */
.wo-crumbs { max-width: 100%; margin: 0 0 4px 0; font: var(--wo-text-sm) var(--wo-font); color: var(--wo-mute); }
.wo-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.wo-crumbs li { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.wo-crumbs a { color: var(--wo-teal-700); text-decoration: none; border-radius: 3px; padding: 1px 2px; }
.wo-crumbs a:hover { text-decoration: underline; }
.wo-crumbs .wo-ic { width: 12px; height: 12px; opacity: 0.6; }
.wo-crumbs [aria-current="page"] { color: var(--wo-ink-2); font-weight: 600; }

#mainmenu .dropdown-content div { margin-top: 0 !important; }
#mainmenu .dropdown-content .wo-prefs { padding: 4px 8px 6px 8px; border-top: 1px solid var(--wo-line); margin-top: 6px; }
.wo-pref { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; font: 600 var(--wo-text-sm) var(--wo-font); color: var(--wo-ink-2); }
.wo-pref-label { display: inline-flex; align-items: center; gap: 8px; }
.wo-seg { display: inline-flex; border: 1px solid var(--wo-line-strong); border-radius: var(--wo-radius-sm); overflow: hidden; }
.wo-seg button { margin: 0; padding: 4px 10px; border: 0; background: var(--wo-surface); color: var(--wo-ink-2); font: 600 var(--wo-text-xs) var(--wo-font); cursor: pointer; }
.wo-seg button + button { border-left: 1px solid var(--wo-line-strong); }
.wo-seg button[aria-checked="true"] { background: var(--wo-teal-700); color: #fff; }
.wo-seg button:focus-visible { outline: 2px solid var(--wo-focus); outline-offset: -2px; }
.wo-exp { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #8a5a00; background: var(--wo-warn-bg); border-radius: var(--wo-radius-pill); padding: 0 6px; }

/* dark mode (opt-in, experimental): the page body below the banner and bar is darkened as a whole; photographs, plots, status colours and the action icons are turned back so they keep their exact colours */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] #content { filter: invert(0.9) hue-rotate(180deg); background-color: #f8fafb; }
:root[data-theme="dark"] #content img, :root[data-theme="dark"] #content canvas, :root[data-theme="dark"] #content video, :root[data-theme="dark"] #content iframe, :root[data-theme="dark"] #content .row-action, :root[data-theme="dark"] #content .explorer-pill,
:root[data-theme="dark"] #content .wo-dot, :root[data-theme="dark"] #content td.pass, :root[data-theme="dark"] #content td.fail, :root[data-theme="dark"] #content td.inprogress, :root[data-theme="dark"] #content td.working, :root[data-theme="dark"] #content td.workingraw,
:root[data-theme="dark"] #content td.empty, :root[data-theme="dark"] #content .aladin-container, :root[data-theme="dark"] #content .nvd3 .nv-series, :root[data-theme="dark"] #content [class*="legend"] i,
:root[data-theme="dark"] #content .ca-av, :root[data-theme="dark"] #content .ca-ghost { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] #content .hero-section, :root[data-theme="dark"] #content .search-card-header, :root[data-theme="dark"] #content thead, :root[data-theme="dark"] #content .link-icon, :root[data-theme="dark"] #content .btn-submit,
:root[data-theme="dark"] #content .btn-request, :root[data-theme="dark"] #content .btn-download, :root[data-theme="dark"] #content .info-bar, :root[data-theme="dark"] #content .ca-send, :root[data-theme="dark"] #content .ca-msg-user { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] #content .wo-auth-hero, :root[data-theme="dark"] #content .wo-btn--primary, :root[data-theme="dark"] #content .wo-auth-badge { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] #content > .wo-crumbs { color: #9aa; }

/* ================================================================== shared buttons and the sign-in pages (login, forgot password, two-factor check) */
.wo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; font: 600 var(--wo-text-lg) var(--wo-font); cursor: pointer; text-decoration: none; transition: background-color var(--wo-fast), border-color var(--wo-fast), box-shadow var(--wo-fast), transform var(--wo-fast), opacity var(--wo-fast); }
.wo-btn:active { transform: translateY(1px); }
.wo-btn--primary { color: #fff; background: linear-gradient(135deg, var(--wo-teal-900) 0%, var(--wo-teal-700) 100%); box-shadow: 0 3px 10px rgba(26, 77, 86, 0.28); }
.wo-btn--primary:hover { box-shadow: 0 5px 14px rgba(26, 77, 86, 0.38); transform: translateY(-1px); }
.wo-btn--ghost { color: var(--wo-teal-900); background: var(--wo-surface); border-color: var(--wo-line-strong); }
.wo-btn--ghost:hover { background: var(--wo-teal-50); border-color: var(--wo-teal-500); }
.wo-btn--block { display: flex; width: 100%; }
.wo-btn .wo-ic { width: 18px; height: 18px; }

#content .wo-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 960px; margin: 24px auto 32px auto; background: var(--wo-surface); border: 1px solid var(--wo-line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 34px rgba(26, 77, 86, 0.16); font-family: var(--wo-font); color: var(--wo-ink); text-align: left; }
#content .wo-auth--single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.wo-auth-hero { position: relative; padding: 40px 36px; color: #fff; overflow: hidden; background: radial-gradient(circle at 85% 12%, rgba(126, 200, 217, 0.35) 0, rgba(126, 200, 217, 0) 38%), radial-gradient(circle at 10% 95%, rgba(106, 79, 214, 0.28) 0, rgba(106, 79, 214, 0) 42%), linear-gradient(150deg, #1a4d56 0%, #286571 60%, #2c7686 100%); }
.wo-auth-hero::before { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(1.5px 1.5px at 18% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 72% 18%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 40% 64%, #fff 99%, transparent), radial-gradient(1px 1px at 88% 58%, #fff 99%, transparent), radial-gradient(1px 1px at 12% 80%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 62% 88%, #fff 99%, transparent), radial-gradient(1px 1px at 30% 8%, #fff 99%, transparent); pointer-events: none; }
.wo-auth-hero > * { position: relative; }
#content .wo-auth-hero h2 { margin: 0 0 8px 0; padding: 0; border: 0; color: #fff; font: 700 28px/1.15 var(--wo-font); letter-spacing: -0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); pointer-events: auto; }
#content .wo-auth-hero p.wo-lead { margin: 0 0 26px 0; text-align: left; color: rgba(255, 255, 255, 0.9); font: 400 var(--wo-text-lg)/1.5 var(--wo-font); }
.wo-auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wo-auth-points li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 0; font: 400 var(--wo-text-md)/1.45 var(--wo-font); color: rgba(255, 255, 255, 0.88); }
.wo-auth-points b { display: block; color: #fff; font-weight: 700; font-size: var(--wo-text-lg); margin-bottom: 1px; }
.wo-auth-points .wo-ic-box { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); display: inline-flex; align-items: center; justify-content: center; }
.wo-auth-points .wo-ic { width: 18px; height: 18px; color: #fff; }
.wo-auth-card { padding: 40px 40px 32px 40px; background: var(--wo-surface); }
#content .wo-auth--single .wo-auth-card { padding: 36px 36px 28px 36px; }
.wo-auth-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px; color: #fff; background: linear-gradient(135deg, var(--wo-teal-700), var(--wo-teal-900)); box-shadow: 0 4px 12px rgba(26, 77, 86, 0.3); }
.wo-auth-badge .wo-ic { width: 24px; height: 24px; }
#content .wo-auth-card h1 { margin: 0 0 4px 0; padding: 0; border: 0; color: var(--wo-teal-900); font: 700 26px/1.2 var(--wo-font); letter-spacing: -0.3px; text-align: left; }
#content .wo-auth-card p.wo-sub { margin: 0 0 22px 0; text-align: left; color: var(--wo-mute); font: 400 var(--wo-text-lg)/1.5 var(--wo-font); }
.wo-field { margin: 0 0 16px 0; }
.wo-field > label { display: block; margin: 0 0 6px 0; color: var(--wo-teal-900); font: 600 var(--wo-text-md) var(--wo-font); }
.wo-input { position: relative; display: flex; align-items: center; }
.wo-input > .wo-ic { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--wo-mute); pointer-events: none; }
#content .wo-input input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px 0 44px; border: 2px solid var(--wo-line); border-radius: 10px; background: #fff; color: var(--wo-ink); font: 400 15px var(--wo-font); transition: border-color var(--wo-fast), box-shadow var(--wo-fast); }
#content .wo-input input:hover { border-color: var(--wo-line-strong); }
#content .wo-input input:focus { outline: none; border-color: var(--wo-teal-500); box-shadow: var(--wo-ring); }
#content .wo-input input.wo-code { padding: 0 14px; text-align: center; letter-spacing: 0.35em; font: 600 22px var(--wo-font-mono); }
.wo-input .wo-eye { position: absolute; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--wo-mute); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wo-input .wo-eye:hover { background: var(--wo-teal-50); color: var(--wo-teal-700); }
.wo-input .wo-eye .wo-ic { position: static; width: 18px; height: 18px; color: inherit; }
#content .wo-input.wo-has-eye input { padding-right: 48px; }
.wo-caps { display: none; align-items: center; gap: 6px; margin-top: 6px; color: var(--wo-warn); font: 600 var(--wo-text-sm) var(--wo-font); }
.wo-caps.wo-on { display: flex; }
.wo-caps .wo-ic { width: 14px; height: 14px; }
.wo-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 2px 0 20px 0; font: 400 var(--wo-text-md) var(--wo-font); }
.wo-check { display: inline-flex; align-items: center; gap: 8px; color: var(--wo-ink-2); cursor: pointer; }
.wo-check input { width: 16px; height: 16px; margin: 0; }
.wo-auth-row a, .wo-auth-links a { color: var(--wo-teal-700); font-weight: 600; text-decoration: none; }
.wo-auth-row a:hover, .wo-auth-links a:hover { text-decoration: underline; }
.wo-auth-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; padding: 12px 14px; border-radius: 10px; background: var(--wo-info-bg); border: 1px solid #cfe5f5; color: var(--wo-ink-2); font: 400 var(--wo-text-sm)/1.5 var(--wo-font); }
.wo-auth-note .wo-ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--wo-info); }
.wo-auth-note a { color: var(--wo-teal-700); font-weight: 600; }
.wo-auth-links { margin: 18px 0 0 0; font: 400 var(--wo-text-md) var(--wo-font); text-align: center; }
.wo-auth-links a { display: inline-flex; align-items: center; gap: 6px; }
.wo-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--wo-mute); font: 600 var(--wo-text-xs) var(--wo-font); text-transform: uppercase; letter-spacing: 0.08em; }
.wo-auth-divider::before, .wo-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--wo-line); }
.wo-fine { margin: 14px 0 0 0; color: var(--wo-mute); font: 400 var(--wo-text-sm)/1.5 var(--wo-font); }
.wo-contact { max-width: 960px; margin: 0 auto 30px auto; text-align: center; color: var(--wo-mute); font: 400 var(--wo-text-sm)/1.6 var(--wo-font); }
.wo-contact b { color: var(--wo-teal-900); font-weight: 600; }
.wo-contact a { color: var(--wo-teal-700); font-weight: 600; text-decoration: none; }
.wo-contact a:hover { text-decoration: underline; }
body.wo-auth-page #footer, body.wo-auth-page div[class*="footer"] { display: none !important; }
@media (max-width: 900px) {
  #content .wo-auth { grid-template-columns: minmax(0, 1fr); margin: 12px auto 20px auto; border-radius: 12px; }
  .wo-auth-hero { padding: 24px 22px; }
  #content .wo-auth-hero h2 { font-size: 22px; }
  .wo-auth-points { display: none; }
  #content .wo-auth-hero p.wo-lead { margin-bottom: 0; }
  .wo-auth-card, #content .wo-auth--single .wo-auth-card { padding: 26px 22px 24px 22px; }
}

@media print { #mainmenu, .wo-skip, .wo-toasts, .wo-progress, .wo-copy, .wo-crumbs { display: none !important; } :root[data-theme="dark"] #content { filter: none; } }