/* Oblique UI Kit — Federal application shell. Component styles on the tokens.
   Surfaces/text/borders use themable semantic vars, so the kit flips in dark. */
@import url("_ds/oblique-design-system-new-26248546-a224-42e1-b3cd-66f0499a63e8/colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--ob-font-body); color: var(--fg-1); background: var(--surface-sunken);
	-webkit-font-smoothing: antialiased; transition: background var(--ob-duration) var(--ob-ease-standard); }
#root { min-height: 100%; }

.app { display: flex; flex-direction: column; min-height: 100vh; }
.app__main { flex: 1; }

/* ---------------------------------------------------------------- Header -- */
/* Oblique master-layout chrome is sticky by default (header.isSticky); header +
   main-nav pin to the top of the viewport while content scrolls beneath them. */
:root { --ob-header-h: 86px; }  /* 16px pad + 53px logo + 16px pad + 1px border (Figma master-layout: 85 + 1) */
.ob-header { background: var(--bg-header); border-bottom: 1px solid var(--border-subtle);
	position: sticky; top: 0; z-index: var(--ob-z-header); }
[data-theme="dark"] .ob-header { border-bottom-color: rgb(255 255 255 / 0.08); }
.ob-header__bar { display: flex; align-items: center; gap: 18px; width: 100%; padding: 16px 24px; box-sizing: border-box; }
.ob-brand { display: flex; align-items: center; gap: 24px; }
.ob-brand img { height: 53px; display: block; }
[data-theme="dark"] .ob-header .ob-brand img { filter: brightness(0) invert(1); }
.ob-brand__divider { width: 1px; height: 53px; background: var(--border-subtle); }
.ob-brand__title { font-size: 26px; font-weight: 300; line-height: 34px; color: var(--fg-1); white-space: nowrap; }
[data-theme="dark"] .ob-header .ob-brand__title { color: #fff; }
.ob-header__spacer { flex: 1; }
.ob-header__search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--ob-radius-md); padding: 7px 11px; width: 230px; color: var(--fg-3); }
.ob-header__search input { border: 0; outline: 0; font-family: inherit; font-size: 14px; color: var(--fg-1); background: transparent; width: 100%; }
.ob-header__search input::placeholder { color: var(--fg-3); }
.ob-header__actions { display: flex; align-items: center; gap: 4px; }
.ob-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border: 0; background: transparent; color: var(--fg-2); cursor: pointer; border-radius: var(--ob-radius-md); position: relative; }
.ob-iconbtn:hover { background: var(--surface-hover); color: var(--fg-1); }
[data-theme="dark"] .ob-header .ob-iconbtn { color: #dfe4e9; }
.ob-iconbtn__dot { position: absolute; top: 7px; right: 8px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
	background: var(--ob-red-500); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ob-lang { display: flex; align-items: center; gap: 5px; border: 0; background: transparent; cursor: pointer; padding: 8px 10px;
	font-family: inherit; font-size: 14px; font-weight: 600; color: var(--fg-2); border-radius: var(--ob-radius-md); }
.ob-lang:hover { background: var(--surface-hover); }
[data-theme="dark"] .ob-header .ob-lang { color: #dfe4e9; }

/* ----------------------------------------------------------- Main nav bar -- */
.ob-nav { background: var(--bg-header); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--ob-shadow-sm);
	position: sticky; top: var(--ob-header-h); z-index: calc(var(--ob-z-header) - 1); }
.ob-nav__bar { display: flex; align-items: stretch; gap: 2px; width: 100%; padding: 0 24px; box-sizing: border-box; }
.ob-nav__spacer { flex: 1; }
.ob-nav__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 48px; border: 0; background: transparent;
	font-family: inherit; font-size: 15px; font-weight: 500; color: var(--fg-2); cursor: pointer; border-bottom: var(--ob-layout-line-width) solid transparent; }
.ob-nav__item:hover { color: var(--fg-1); background: var(--surface-hover); }
.ob-nav__item--active { color: var(--link); border-bottom-color: var(--accent); font-weight: 600; }
.ob-nav__item--muted { font-size: 14px; color: var(--fg-2); }
[data-theme="dark"] .ob-nav .ob-nav__item { color: #c5cdd5; }
[data-theme="dark"] .ob-nav .ob-nav__item--active { color: #93b4fb; }

/* nav: dropdown group (children) */
.ob-nav__group { position: relative; display: inline-flex; }
.ob-nav__menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 220px; padding: 6px;
	background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg);
	box-shadow: var(--ob-shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.ob-nav__menuitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0;
	background: transparent; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--fg-1);
	cursor: pointer; border-radius: var(--ob-radius-sm); text-align: left; }
.ob-nav__menuitem:hover { background: var(--surface-hover); }
.ob-nav__menuitem.is-active { color: var(--link); font-weight: 600; }
.ob-nav__menuitem.is-active svg { color: var(--link); }

/* nav: removable item */
.ob-nav__item--removable { padding-right: 8px; }
.ob-nav__remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
	border-radius: 999px; color: var(--fg-3); margin-left: 2px; }
.ob-nav__remove:hover { background: var(--ob-red-100, rgba(220,53,69,.14)); color: var(--ob-red-500); }

/* header: language switcher menu */
.ob-lang-wrap { position: relative; }
.ob-lang.is-on { background: var(--surface-hover); }
.ob-lang__menu { position: absolute; top: 100%; right: 0; z-index: 60; min-width: 184px; margin-top: 4px; padding: 6px;
	list-style: none; background: var(--surface-raised); border: 1px solid var(--border-subtle);
	border-radius: var(--ob-radius-lg); box-shadow: var(--ob-shadow-lg); }
.ob-lang__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent;
	font-family: inherit; font-size: 14px; color: var(--fg-1); cursor: pointer; border-radius: var(--ob-radius-sm); text-align: left; }
.ob-lang__opt:hover { background: var(--surface-hover); }
.ob-lang__opt .ob-lang__code { display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
	font-size: 11px; font-weight: 700; color: var(--fg-2); }
.ob-lang__opt.is-active { color: var(--link); font-weight: 600; }
.ob-lang__opt svg { margin-left: auto; color: var(--link); }

/* header: navigation toggle (hamburger) — hidden on wide viewports, shown when collapsed */
.ob-header-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
	border: 0; background: transparent; cursor: pointer; border-radius: var(--ob-radius-md); color: var(--fg-1); }
.ob-header-toggle:hover { background: var(--surface-hover); }
.ob-header-toggle__lines { position: relative; width: 22px; height: 16px; }
.ob-header-toggle__lines span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px;
	transition: transform .2s var(--ob-ease-standard), opacity .2s var(--ob-ease-standard), top .2s var(--ob-ease-standard); }
.ob-header-toggle__lines span:nth-child(1) { top: 0; }
.ob-header-toggle__lines span:nth-child(2) { top: 7px; }
.ob-header-toggle__lines span:nth-child(3) { top: 14px; }
.ob-header-toggle.is-open .ob-header-toggle__lines span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.ob-header-toggle.is-open .ob-header-toggle__lines span:nth-child(2) { opacity: 0; }
.ob-header-toggle.is-open .ob-header-toggle__lines span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
[data-theme="dark"] .ob-header .ob-header-toggle { color: #dfe4e9; }

/* collapsed navigation: stack vertically below the federal `md` tier (906px),
   toggled by the header hamburger */
@media (max-width: 905px) {
	.ob-header-toggle { display: inline-flex; }
	.ob-nav { display: none; }
	.ob-nav.is-open { display: block; }
	.ob-nav__bar { flex-direction: column; align-items: stretch; gap: 0; max-width: none; padding: 8px 0; }
	.ob-nav__group { position: relative; display: block; }
	.ob-nav__item { width: 100%; justify-content: flex-start; height: 48px; padding: 0 24px; border-bottom: 0; }
	.ob-nav__item--active { border-bottom: 0; box-shadow: inset var(--ob-layout-line-width) 0 0 var(--accent); }
	.ob-nav__group > .ob-nav__item > svg:last-child { margin-left: auto; }
	.ob-nav__spacer { display: none; }
	.ob-nav__menu { position: static; min-width: 0; padding: 0 0 4px 36px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
	.ob-nav__menuitem { padding: 9px 24px; }
}

/* off-canvas: link sections (header menu panel) */
.ob-offcanvas__section { padding: 4px 0 12px; }
.ob-offcanvas__section + .ob-offcanvas__section { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.ob-offcanvas__h { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3); }
.ob-offcanvas__link { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--ob-radius-sm);
	text-decoration: none; color: var(--fg-1); }
.ob-offcanvas__link:hover { background: var(--surface-hover); }
.ob-offcanvas__linkic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: var(--ob-radius-sm); background: var(--bg-subtle); color: var(--fg-2); flex: none; }
.ob-offcanvas__linkmeta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ob-offcanvas__linknm { font-size: 14px; font-weight: 600; }
.ob-offcanvas__linksub { font-size: 12px; color: var(--fg-3); }
.ob-offcanvas__link > svg:last-child { color: var(--fg-3); flex: none; }

/* -------------------------------------------------------------- Content --- */
.ob-page { padding: 16px 24px 48px; }
/* Opt-in centred content (the official `ob-has-max-width`): the app stays fluid,
   only the content column is capped at the xl breakpoint (1440px). */
.ob-has-max-width { max-width: 1440px; margin-inline: auto; }
.ob-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-3); margin-bottom: 14px; }
.ob-breadcrumb a { color: var(--link); text-decoration: none; }
.ob-breadcrumb a:hover { text-decoration: underline; }
.ob-breadcrumb .ob-icon { width: 14px; height: 14px; color: var(--fg-3); }
.ob-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ob-pagehead h1 { margin: 0; }
.ob-pagehead p { margin: 4px 0 0; color: var(--fg-2); font-size: 15px; }

/* Stats */
.ob-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ob-stat { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg); padding: 16px 18px; }
.ob-stat__top { display: flex; align-items: center; justify-content: space-between; }
.ob-stat__label { font-size: 13px; color: var(--fg-2); font-weight: 500; }
.ob-stat__icon { color: var(--fg-3); }
.ob-stat__value { font-size: 30px; font-weight: 700; color: var(--fg-1); margin-top: 8px; letter-spacing: -.5px; }
.ob-stat__delta { font-size: 12px; margin-top: 4px; font-weight: 600; }

/* Toolbar */
.ob-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ob-toolbar__spacer { flex: 1; }

/* Card */
.ob-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg); }
.ob-card__head { padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; }
.ob-card__head h2 { margin: 0; font-size: 18px; }
.ob-card__body { padding: 20px; }

/* -------------------------------------------------------------- Controls -- */
.ob-btn { font-family: inherit; font-size: 16px; font-weight: 500; line-height: 16px; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; min-height: 38px;
	border-radius: var(--ob-btn-radius); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
/* Transitions only from the interactive states — never on initial paint, so a
   late-loading stylesheet can't freeze the button on UA-default grey. */
.ob-btn:hover, .ob-btn:active, .ob-btn:focus-visible { transition: background-color var(--ob-duration) var(--ob-ease-standard), border-color var(--ob-duration) var(--ob-ease-standard), box-shadow var(--ob-duration) var(--ob-ease-standard); }
.ob-btn .ob-icon { width: 24px; height: 24px; }
.ob-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--ob-radius-md); }
.ob-btn--primary { background: var(--ob-btn-primary-bg); color: var(--ob-btn-primary-fg); }
.ob-btn--primary:hover { background: var(--ob-btn-primary-hover); box-shadow: var(--ob-shadow-xl); }
.ob-btn--primary:active { background: var(--ob-btn-primary-pressed); box-shadow: none; }
.ob-btn--secondary { background: transparent; color: var(--ob-btn-ink); border-color: var(--ob-btn-outline); }
.ob-btn--secondary:hover { background: var(--ob-btn-ghost-hover); border-color: var(--ob-btn-ink-hover); color: var(--ob-btn-ink-hover); box-shadow: var(--ob-shadow-xl); }
.ob-btn--secondary:active { background: transparent; box-shadow: none; }
.ob-btn--tertiary { background: transparent; color: var(--ob-btn-ink); padding-inline: 12px; }
.ob-btn--tertiary:hover { background: var(--ob-btn-ghost-hover); color: var(--ob-btn-ink-hover); box-shadow: var(--ob-shadow-xl); }
.ob-btn--tertiary:active { box-shadow: none; }
.ob-btn--danger { background: var(--ob-red-500); color: #fff; }
.ob-btn--danger:hover { background: var(--ob-red-700); }
.ob-btn:disabled { background: var(--ob-btn-disabled-bg); color: rgb(255 255 255 / 0.85); border-color: transparent; cursor: not-allowed; box-shadow: none; }
.ob-btn--secondary:disabled, .ob-btn--tertiary:disabled { background: transparent; color: var(--ob-btn-disabled-fg); border-color: var(--ob-btn-disabled-fg); }
.ob-btn--tertiary:disabled { border-color: transparent; }

.ob-field { display: flex; flex-direction: column; gap: 5px; }
.ob-field > label { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.ob-field__req { color: var(--ob-red-500); }
.ob-input, .ob-select, .ob-textarea { font-family: inherit; font-size: 15px; color: var(--fg-1); background: var(--surface);
	border: 1px solid var(--border); border-radius: var(--ob-radius-lg); padding: 9px 11px; width: 100%; }
/* single-line controls honour the 36px federal control height (--ob-control-height) */
.ob-input, .ob-select { min-height: var(--ob-control-height); padding-block: 0; }
.ob-input::placeholder { color: var(--fg-3); }
.ob-input:focus, .ob-select:focus, .ob-textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--link); }
.ob-input--error { border-color: var(--ob-red-500); }
.ob-field__hint { font-size: 12px; color: var(--fg-3); }
.ob-field__error { font-size: 12px; color: var(--critical-on); display: flex; align-items: center; gap: 4px; }
.ob-field__error .ob-icon { width: 15px; height: 15px; }
.ob-select-wrap { position: relative; }
.ob-select-wrap .ob-icon { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--fg-3); pointer-events: none; }
.ob-select { appearance: none; padding-right: 34px; }

.ob-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.35; }
.ob-badge .ob-icon { width: 13px; height: 13px; }
/* Chip — Figma spec: 32px pill (22px radius), label 14/20, icon 18px, padding 7/12.
   Base = outlined; .is-active fills slate 2F4356 (success variant: resolved green). */
.ob-chip { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 32px; padding: 7px 12px;
	border-radius: 22px; font-size: 14px; line-height: 20px; font-weight: 400; font-family: inherit;
	background: var(--surface); border: 1px solid var(--ob-neutral-400); color: var(--fg-1); cursor: pointer; }
.ob-chip .ob-icon { width: 18px; height: 18px; color: currentColor; }
.ob-chip:hover { background: var(--bg-subtle); }
.ob-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ob-chip.is-active { background: var(--ob-neutral-600); border-color: var(--ob-neutral-600); color: #ffffff; }
.ob-chip.is-active:hover { background: var(--ob-neutral-700); }
.ob-chip--success.is-active { background: #059669; border-color: #059669; }
.ob-chip--success.is-active:hover { background: #065f46; }
.ob-chip__x { display: inline-flex; margin-right: -4px; cursor: pointer; opacity: .85; }
.ob-chip__x:hover { opacity: 1; }
.ob-chip__x .ob-icon { width: 18px; height: 18px; }
.ob-chip:disabled { background: var(--ob-btn-disabled-bg); border-color: transparent; color: rgb(255 255 255 / 0.85); cursor: not-allowed; }
[data-theme="dark"] .ob-chip.is-active { background: var(--ob-neutral-100); border-color: var(--ob-neutral-100); color: var(--ob-neutral-800); }

/* Alert */
.ob-alert { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: var(--ob-radius-lg);
	border: 1px solid; border-left-width: 3px; font-size: 14px; line-height: 1.45; }
.ob-alert .ob-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.ob-alert__x { margin-left: auto; cursor: pointer; opacity: .55; }
.ob-alert__x:hover { opacity: 1; }
.ob-alert--info { background: var(--info-surface); border-color: var(--info-border); border-left-color: var(--ob-info-500); color: var(--info-on); }
.ob-alert--success { background: var(--success-surface); border-color: var(--success-border); border-left-color: var(--ob-success-500); color: var(--success-on); }
.ob-alert--warning { background: var(--warning-surface); border-color: var(--warning-border); border-left-color: var(--ob-warning-500); color: var(--warning-on); }
.ob-alert--critical { background: var(--critical-surface); border-color: var(--critical-border); border-left-color: var(--ob-critical-500); color: var(--critical-on); }

/* Table */
.ob-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ob-table thead th { text-align: left; font-weight: 700; color: var(--fg-1); padding: 11px 16px; border-bottom: 2px solid var(--border); background: var(--surface); white-space: nowrap; }
.ob-table thead th .ob-icon { width: 14px; height: 14px; color: var(--fg-3); vertical-align: -2px; }
.ob-table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-2); }
.ob-table tbody tr { cursor: pointer; }
.ob-table tbody tr:hover { background: var(--surface-hover); }
.ob-table tbody tr.is-selected { background: var(--surface-hover); box-shadow: inset 3px 0 0 var(--accent); }
.ob-table .right { text-align: right; font-family: var(--ob-font-mono); }
.ob-table__ref { font-family: var(--ob-font-mono); color: var(--fg-1); font-weight: 500; }

/* Footer — the official application footer (master-layout source): secondary-700
   #263645 surface, ONE slim row (8px 24px), links (left) · version (centre) ·
   info (right), white 12.8/20. Collapsed (<905px): single column, left-aligned. */
.ob-footer { background: var(--bg-footer); color: #fff; margin-top: auto; }
.ob-footer__bar { width: 100%; box-sizing: border-box; padding: 8px 24px; display: grid;
	grid-template-columns: 1fr auto 1fr; align-items: start; gap: 6px 24px;
	font-size: 12.8px; line-height: 20px; }
.ob-footer__links { justify-self: start; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ob-footer__links a { color: #fff; text-decoration: none; }
.ob-footer__links a:hover { color: #dfe4e9; }
.ob-footer__version { justify-self: center; text-align: center; white-space: nowrap; letter-spacing: .03em; opacity: .92; }
.ob-footer__info { justify-self: end; text-align: right; }
@media (max-width: 905px) {
	.ob-footer__bar { grid-template-columns: 1fr; justify-items: start; gap: 12px; padding: 24px; }
	.ob-footer__version, .ob-footer__info { justify-self: start; text-align: left; }
}

/* Environment banner — the official rotated corner ribbon over the header brand.
   Colours = $ob-env-* (local green-700, dev yellow-300, ref orange-600,
   test secondary-500, abn red-800). Markup, first child of .ob-header:
   <div class="ob-envbanner-clip"><span class="ob-envbanner ob-envbanner--local">LOCAL</span></div> */
.ob-envbanner-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ob-envbanner { position: absolute; top: 10px; left: -34px; transform: rotate(-45deg); transform-origin: center;
	display: block; width: 110px; text-align: center; padding: 2px 0;
	font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; }
.ob-envbanner--local { background: #047857; }
.ob-envbanner--dev { background: #fcd34d; color: #1c2834; }
.ob-envbanner--ref { background: #ea580c; }
.ob-envbanner--test { background: #46596b; }
.ob-envbanner--abn { background: #99191e; }

/* Logo variant — <html data-logo="cross"> swaps the full Confederation lockup for the
   coat of arms alone (the official collapsed treatment, kept at all widths — an
   intentional deviation some service portals use). */
/* [data-logo="cross"] coat-of-arms variant removed — asset not used in this project */
[data-logo="cross"] .ob-brand { gap: 16px; }
[data-logo="cross"] .ob-brand__divider { height: 36px; }

/* Off-canvas / dialog */
/* Overlays ride the token z-index ladder so they sit ABOVE the sticky chrome
   (header 1100) and the floating back-to-top (1100): scrim+drawer = 1200,
   modal = 1300, toasts = 1400, tooltips/popovers = 1500. */
.ob-scrim { position: fixed; inset: 0; background: rgba(19,27,34,.45); z-index: var(--ob-z-drawer); animation: obFade .16s var(--ob-ease-standard); }
.ob-offcanvas { position: fixed; top: 0; right: 0; bottom: 0; width: var(--ob-offcanvas-width); min-width: 380px; max-width: 92vw; background: var(--surface-raised); z-index: var(--ob-z-drawer);
	box-shadow: var(--ob-shadow-2xl); display: flex; flex-direction: column; animation: obSlide .2s var(--ob-ease-standard); }
.ob-offcanvas__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.ob-offcanvas__head h2 { margin: 0; font-size: 20px; }
.ob-offcanvas__body { padding: 22px; overflow-y: auto; flex: 1; }
.ob-offcanvas__foot { padding: 16px 22px; border-top: 1px solid var(--border-subtle); display: flex; gap: 10px; justify-content: flex-end; }
@keyframes obFade { from { opacity: 0; } }
@keyframes obSlide { from { transform: translateX(20px); } }
@media (prefers-reduced-motion: reduce) { .ob-scrim, .ob-offcanvas { animation: none; } }
/* Below the federal `md` tier the drawer widens to the collapsed sidebar width (80%). */
@media (max-width: 905px) { .ob-offcanvas { width: var(--ob-offcanvas-width-collapsed); min-width: 0; } }

/* Modal dialog (centred) */
.ob-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 540px; max-width: 94vw; max-height: 88vh;
	background: var(--surface-raised); z-index: var(--ob-z-modal); border-radius: var(--ob-radius-lg); box-shadow: var(--ob-shadow-2xl);
	display: flex; flex-direction: column; animation: obPop .18s var(--ob-ease-standard); }
.ob-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.ob-modal__head h2 { margin: 0; font-size: 20px; }
.ob-modal__body { padding: 22px; overflow-y: auto; }
.ob-modal__foot { padding: 16px 22px; border-top: 1px solid var(--border-subtle); display: flex; gap: 10px; justify-content: flex-end; }
@keyframes obPop { from { transform: translate(-50%, -48%) scale(.98); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ob-modal { animation: none; } }

/* Definition list */
.ob-dl { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ob-dl__row { display: flex; flex-direction: column; gap: 3px; }
.ob-dl__row dt { font-size: 12px; font-weight: 600; color: var(--fg-3); text-transform: uppercase; letter-spacing: .03em; }
.ob-dl__row dd { margin: 0; font-size: 15px; color: var(--fg-1); }

/* Login */
.ob-login { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-sunken); }
.ob-login__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.ob-login__card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg); box-shadow: var(--ob-shadow-default);
	width: 400px; max-width: 100%; padding: 32px; }
.ob-login__logo { height: 44px; margin-bottom: 24px; }
[data-theme="dark"] .ob-login__logo { filter: brightness(0) invert(1); }
.ob-login__card h1 { font-size: 23px; margin: 0 0 6px; color: var(--fg-1); }
.ob-login__card p { margin: 0 0 22px; color: var(--fg-2); font-size: 14px; }
.ob-login__fields { display: flex; flex-direction: column; gap: 16px; }
.ob-login__row { display: flex; align-items: center; justify-content: space-between; }
.ob-login__eid { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 11px; border: 1px solid var(--border);
	border-radius: var(--ob-radius-md); color: var(--fg-2); font-weight: 600; font-size: 14px; cursor: pointer; background: var(--surface); margin-top: 4px; }
.ob-login__eid:hover { background: var(--surface-hover); }
.ob-login__eid .ob-icon { width: 18px; height: 18px; }

/* Theme toggle (segmented) */
.ob-themetoggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--ob-radius-md); overflow: hidden; }
.ob-themetoggle button { display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: 32px;
	border: 0; background: transparent; color: var(--fg-3); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; }
.ob-themetoggle button.is-on { background: var(--surface-hover); color: var(--link); }
.ob-themetoggle .ob-icon { width: 18px; height: 18px; }

/* ============================== NEW COMPONENTS ============================== */

/* Tabs */
.ob-tabs { border-bottom: 1px solid var(--border); display: flex; gap: 2px; }
.ob-tab { font-family: inherit; font-size: 15px; font-weight: 500; color: var(--fg-2); background: transparent; border: 0;
	padding: 12px 16px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.ob-tab:hover { color: var(--fg-1); }
.ob-tab .ob-icon { width: 18px; height: 18px; }
.ob-tab--active { color: var(--link); border-bottom-color: var(--accent); font-weight: 600; }
.ob-tab__count { font-size: 12px; font-weight: 700; background: var(--surface-hover); color: var(--fg-2); border-radius: 999px; padding: 1px 7px; }

/* Stepper */
.ob-stepper { display: flex; align-items: center; }
.ob-step { display: flex; align-items: center; gap: 10px; }
.ob-step__num { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; border: 2px solid var(--border); color: var(--fg-3); background: var(--surface); flex: none; }
.ob-step__num .ob-icon { width: 16px; height: 16px; }
.ob-step__label { font-size: 14px; font-weight: 600; color: var(--fg-3); }
.ob-step__sub { font-size: 12px; color: var(--fg-3); }
.ob-step--active .ob-step__num { border-color: var(--accent); color: var(--accent); }
.ob-step--active .ob-step__label { color: var(--fg-1); }
.ob-step--done .ob-step__num { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
[data-theme="dark"] .ob-step--done .ob-step__num { color: var(--accent-fg); }
.ob-step--done .ob-step__label { color: var(--fg-1); }
.ob-step__line { flex: 1; height: 2px; background: var(--border); margin: 0 14px; min-width: 28px; }
.ob-step__line--done { background: var(--accent); }

/* Pagination */
.ob-pagination { display: inline-flex; align-items: center; gap: 4px; }
.ob-pagination button { min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid var(--border); background: var(--surface);
	color: var(--fg-2); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--ob-radius-md);
	display: inline-flex; align-items: center; justify-content: center; }
.ob-pagination button:hover:not(:disabled) { border-color: var(--link); color: var(--link); }
.ob-pagination button.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
[data-theme="dark"] .ob-pagination button.is-current { color: var(--accent-fg); }
.ob-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.ob-pagination .ob-icon { width: 16px; height: 16px; }
.ob-pagination__ellipsis { color: var(--fg-3); padding: 0 4px; }

/* Tooltip */
.ob-tooltip { position: relative; display: inline-flex; }
.ob-tooltip__bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	background: var(--ob-neutral-900); color: #fff; font-size: 12.5px; line-height: 1.4; padding: 7px 10px; border-radius: var(--ob-radius-md);
	white-space: nowrap; box-shadow: var(--ob-shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--ob-duration); z-index: var(--ob-z-tooltip); }
.ob-tooltip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 5px solid transparent; border-top-color: var(--ob-neutral-900); }
.ob-tooltip:hover .ob-tooltip__bubble, .ob-tooltip:focus-within .ob-tooltip__bubble { opacity: 1; }

/* Slide toggle */
.ob-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--fg-1); }
.ob-toggle__track { width: 40px; height: 22px; border-radius: 999px; background: var(--ob-neutral-300); position: relative; transition: background var(--ob-duration); flex: none; }
.ob-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff;
	box-shadow: var(--ob-shadow-sm); transition: transform var(--ob-duration) var(--ob-ease-standard); }
.ob-toggle--on .ob-toggle__track { background: var(--accent); }
.ob-toggle--on .ob-toggle__track::after { transform: translateX(18px); }

/* Accordion / expansion panel */
.ob-accordion { border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg); overflow: hidden; }
.ob-accordion__item + .ob-accordion__item { border-top: 1px solid var(--border-subtle); }
.ob-accordion__head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface);
	border: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--fg-1); text-align: left; }
.ob-accordion__head:hover { background: var(--surface-hover); }
.ob-accordion__head .ob-icon { width: 20px; height: 20px; color: var(--fg-2); transition: transform var(--ob-duration); margin-left: auto; }
.ob-accordion__item--open .ob-accordion__head .ob-icon { transform: rotate(180deg); }
.ob-accordion__panel { padding: 0 16px 16px; font-size: 14px; line-height: 1.5; color: var(--fg-2); background: var(--surface); }

/* List group — the federal 40px row pattern (nav-tree look): 1px hairline borders,
   selected row gets the 3px red marker + subtle fill. */
.ob-listgroup { display: flex; flex-direction: column; }
.ob-listgroup__row { display: flex; align-items: center; gap: 10px; min-height: 40px; width: 100%; box-sizing: border-box;
	background: var(--surface); border: 1px solid var(--border-subtle); margin-top: -1px; padding: 8px 16px; position: relative;
	font-family: inherit; font-size: 14px; line-height: 20px; color: var(--fg-1); cursor: pointer; text-align: left; }
.ob-listgroup__row:hover { background: var(--surface-hover); }
.ob-listgroup__row.is-selected { background: var(--bg-subtle); }
.ob-listgroup__row.is-selected::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--ob-red-500); }

/* Spinner */
.ob-spinner { width: 28px; height: 28px; border-radius: 999px; border: 3px solid var(--border); border-top-color: var(--accent);
	animation: obSpin .7s linear infinite; }
.ob-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
@keyframes obSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ob-spinner { animation-duration: 2s; } }

/* Progress bar — Figma spec: 6px, SQUARE corners, track neutral-100, fill slate;
   100% switches to the resolved green. */
.ob-progress { height: 6px; background: var(--ob-neutral-100); overflow: hidden; position: relative; }
.ob-progress__fill { height: 100%; background: var(--ob-neutral-400); transition: width .3s var(--ob-ease-standard); }
.ob-progress--done .ob-progress__fill { background: #059669; }
.ob-progress--indeterminate .ob-progress__fill { width: 35% !important; animation: obIndeterminate 1.3s var(--ob-ease-standard) infinite; }
@keyframes obIndeterminate { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ob-progress--indeterminate .ob-progress__fill { animation: none; margin-left: 0; } }

/* Autocomplete — 40px input (4px radius, neutral-400 border, 24px search icon),
   suggestion panel on the default shadow; typed fragment renders bold. */
.ob-autocomplete { position: relative; width: 300px; }
.ob-autocomplete__input { display: flex; align-items: center; gap: 12px; height: 40px; box-sizing: border-box; padding: 0 12px;
	background: var(--surface); border: 1px solid var(--ob-neutral-400); border-radius: var(--ob-radius-lg); }
.ob-autocomplete__input .ob-icon { width: 24px; height: 24px; color: var(--ob-neutral-400); flex: none; }
.ob-autocomplete__input input { border: 0; outline: 0; background: transparent; width: 100%; font-family: inherit; font-size: 16px; line-height: 24px; color: var(--fg-1); }
.ob-autocomplete__input input::placeholder { color: var(--ob-neutral-400); }
.ob-autocomplete__input:focus-within { border-color: var(--link); outline: 3px solid var(--focus); outline-offset: 0; }
.ob-autocomplete__panel { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: var(--surface-raised);
	border-radius: var(--ob-radius-lg); box-shadow: var(--ob-shadow-default); padding: 4px 0; }
.ob-autocomplete__opt { padding: 8px 16px; font-size: 16px; line-height: 24px; color: var(--fg-1); cursor: pointer; }
.ob-autocomplete__opt b { font-weight: 700; }
.ob-autocomplete__opt.is-active { background: var(--ob-interaction-focus-bg); }
.ob-autocomplete__empty { padding: 8px 16px; font-size: 14px; color: var(--fg-3); }

/* Slider — 4px pill track, 20px slate thumb; hover/drag: 10px halo + value flag
   (38×28, 2px radius, rotated-square pointer). */
.ob-slider { position: relative; height: 20px; cursor: pointer; touch-action: none; outline: none; }
.ob-slider__track { position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 100px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); box-sizing: border-box; }
.ob-slider__fill { position: absolute; left: 0; top: 8px; height: 4px; border-radius: 100px; background: var(--ob-neutral-400); }
.ob-slider__thumb { position: absolute; top: 0; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--ob-neutral-400); }
.ob-slider:hover .ob-slider__thumb, .ob-slider.is-drag .ob-slider__thumb { box-shadow: 0 0 0 10px rgb(130 142 154 / 0.15); }
.ob-slider:focus-visible .ob-slider__thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.ob-slider__tip { display: none; position: absolute; top: -36px; width: 38px; height: 28px; margin-left: -19px; border-radius: 2px;
	background: var(--ob-neutral-400); color: #fff; font-size: 16px; line-height: 28px; text-align: center; }
.ob-slider__tip::after { content: ""; position: absolute; left: 13px; bottom: -4px; width: 12px; height: 12px; border-radius: 2px;
	background: var(--ob-neutral-400); transform: rotate(45deg); z-index: -1; }
.ob-slider:hover .ob-slider__tip, .ob-slider.is-drag .ob-slider__tip, .ob-slider:focus-visible .ob-slider__tip { display: block; }

/* Sticky panel — 52px sticky header + scrolling body + action footer. */
.ob-sticky { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--ob-radius-lg); overflow: hidden; box-sizing: border-box; }
.ob-sticky__head { flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;
	padding: 0 16px; border-bottom: 1px solid var(--border-subtle); font-size: 16px; font-weight: 700; color: var(--fg-1); }
.ob-sticky__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px; font-size: 14px; line-height: 20px; color: var(--fg-1); }
.ob-sticky__foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border-subtle); }

/* Column layout — collapsible side columns, 24×80 slate edge toggles. */
.ob-collayout { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--ob-radius-lg); overflow: hidden; box-sizing: border-box; }
.ob-collayout__col { position: relative; flex: none; min-width: 0; background: var(--bg-subtle); overflow: hidden; box-sizing: border-box; transition: width .2s var(--ob-ease-standard); }
.ob-collayout__col--left { border-right: 1px solid var(--border-subtle); }
.ob-collayout__col--right { border-left: 1px solid var(--border-subtle); }
.ob-collayout__col.is-collapsed { border-width: 0; }
.ob-collayout__main { flex: 1; min-width: 0; position: relative; }
.ob-collayout__toggle { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 80px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer;
	background: var(--ob-neutral-600); color: #fff; z-index: 5; }
.ob-collayout__toggle:hover { background: var(--ob-neutral-700); }
.ob-collayout__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ob-collayout__toggle .ob-icon { width: 16px; height: 16px; }
.ob-collayout__toggle--left { left: 0; border-radius: 0 4px 4px 0; }
.ob-collayout__toggle--right { right: 0; border-radius: 4px 0 0 4px; }

/* Datepicker */
.ob-datepicker { width: 280px; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg);
	box-shadow: var(--ob-shadow-lg); padding: 14px; }
.ob-datepicker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ob-datepicker__title { font-size: 15px; font-weight: 700; color: var(--fg-1); }
.ob-datepicker__nav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0;
	background: transparent; color: var(--fg-2); cursor: pointer; border-radius: var(--ob-radius-md); }
.ob-datepicker__nav:hover { background: var(--surface-hover); }
.ob-datepicker__nav .ob-icon { width: 18px; height: 18px; }
.ob-datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ob-datepicker__dow { font-size: 11px; font-weight: 700; color: var(--fg-3); text-align: center; padding: 4px 0; }
.ob-datepicker__day { aspect-ratio: 1; border: 0; background: transparent; color: var(--fg-1); font-family: inherit; font-size: 13px;
	cursor: pointer; border-radius: var(--ob-radius-lg); display: flex; align-items: center; justify-content: center; }
.ob-datepicker__day:hover { background: var(--surface-hover); }
.ob-datepicker__day--muted { color: var(--fg-3); opacity: .5; }
.ob-datepicker__day--today { box-shadow: inset 0 0 0 1px var(--border); }
.ob-datepicker__day--selected { background: var(--accent); color: var(--accent-fg); font-weight: 700; }
[data-theme="dark"] .ob-datepicker__day--selected { color: var(--accent-fg); }

/* ============================ FEDERAL CHROME EXTRAS ========================= */

/* Environment banner — slim full-width strip flagging the deployment stage. */
.ob-banner { width: 100%; color: var(--ob-env-fg); text-align: center; font-size: 12.5px; font-weight: 700;
	letter-spacing: .04em; padding: 4px 16px; }
.ob-banner--local { background: var(--ob-env-local); }
.ob-banner--dev   { background: var(--ob-env-dev); }
.ob-banner--ref   { background: var(--ob-env-ref); }
.ob-banner--test  { background: var(--ob-env-test); }
.ob-banner--abn   { background: var(--ob-env-abn); }

/* Skip link — visually hidden until focused (WCAG). */
.ob-skip { position: absolute; left: 12px; top: -60px; z-index: var(--ob-z-tooltip);
	background: var(--surface); color: var(--link); font-size: 13px; font-weight: 700; text-decoration: none;
	padding: 8px 14px; border-radius: var(--ob-radius-md); box-shadow: var(--ob-shadow-md);
	transition: top var(--ob-duration-micro) var(--ob-ease-standard); }
.ob-skip:focus { top: 10px; outline: 3px solid var(--focus); outline-offset: 2px; }

/* Breadcrumb */
.ob-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; }
.ob-breadcrumb a { color: var(--link); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ob-breadcrumb a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
.ob-breadcrumb .ob-icon { width: 15px; height: 15px; }
.ob-breadcrumb__sep { color: var(--ob-neutral-300); display: inline-flex; }
.ob-breadcrumb__current { color: var(--fg-2); font-weight: 600; white-space: nowrap; }

/* Back-to-top control */
.ob-totop { position: fixed; right: 24px; bottom: 24px; z-index: var(--ob-z-header); width: 44px; height: 44px;
	border: 0; border-radius: var(--ob-radius-md); background: var(--ob-btn-primary-bg); color: var(--ob-btn-primary-fg); cursor: pointer;
	box-shadow: var(--ob-shadow-lg); display: inline-flex; align-items: center; justify-content: center; }
.ob-totop:hover { background: var(--ob-btn-primary-hover); }
.ob-totop:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[data-theme="dark"] .ob-totop { color: var(--accent-fg); }
.ob-totop .ob-icon { width: 22px; height: 22px; }

/* Centred content column for standalone federal pages. */
.ob-content { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }
.ob-content--narrow { max-width: 820px; }

/* ---- Toast / notification ---- */
.ob-toaststack { position: fixed; top: 16px; right: 16px; z-index: var(--ob-z-notification); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.ob-toast { width: 340px; max-width: calc(100vw - 32px); display: flex; gap: 11px; align-items: flex-start; background: var(--surface);
	border: 1px solid var(--border-subtle); border-left-width: 3px; border-radius: var(--ob-radius-lg); box-shadow: var(--ob-shadow-lg); padding: 12px 13px; }
.ob-toast > .ob-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.ob-toast__body { flex: 1; min-width: 0; }
.ob-toast__ti { font-size: 13.5px; font-weight: 700; color: var(--fg-1); margin-bottom: 2px; }
.ob-toast__ms { font-size: 12.5px; line-height: 1.4; color: var(--fg-2); }
.ob-toast__x { width: 16px; height: 16px; opacity: .45; flex: none; cursor: pointer; }
.ob-toast__x:hover { opacity: 1; }
.ob-toast--info > .ob-icon:first-child { color: var(--ob-info-500); } .ob-toast--info { border-left-color: var(--ob-info-500); }
.ob-toast--success > .ob-icon:first-child { color: var(--ob-success-500); } .ob-toast--success { border-left-color: var(--ob-success-500); }
.ob-toast--warning > .ob-icon:first-child { color: var(--ob-warning-500); } .ob-toast--warning { border-left-color: var(--ob-warning-500); }
.ob-toast--error > .ob-icon:first-child { color: var(--ob-critical-500); } .ob-toast--error { border-left-color: var(--ob-critical-500); }

/* ---- Popover ---- */
.ob-popover { position: relative; display: inline-flex; }
.ob-popover__panel { position: absolute; z-index: var(--ob-z-tooltip); width: 240px; background: var(--surface-raised);
	border-radius: var(--ob-radius-lg); padding: 13px 14px; filter: drop-shadow(0 2px 4px rgb(0 0 0/.06)) drop-shadow(0 4px 10px rgb(0 0 0/.08)); }
.ob-popover__panel--top { bottom: calc(100% + 12px); left: 0; }
.ob-popover__panel--bottom { top: calc(100% + 12px); left: 0; }
.ob-popover__panel h4 { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--fg-1); }
.ob-popover__panel p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.ob-popover__arrow { position: absolute; left: 44px; width: 14px; height: 14px; background: var(--surface-raised); transform: rotate(45deg); }
.ob-popover__panel--top .ob-popover__arrow { top: 100%; transform: translateY(-50%) rotate(45deg); }
.ob-popover__panel--bottom .ob-popover__arrow { top: 0; transform: translateY(-50%) rotate(45deg); }

/* ---- Nav-tree ---- */
.ob-navtree { border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg); background: var(--surface); padding: 6px; }
.ob-navtree__node { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border-radius: var(--ob-radius-md);
	font-size: 14px; color: var(--fg-1); cursor: pointer; position: relative; white-space: nowrap; border: 0; background: transparent; width: 100%; font-family: inherit; text-align: left; }
.ob-navtree__node:hover { background: var(--surface-hover); }
.ob-navtree__tw { width: 16px; height: 16px; color: var(--fg-3); flex: none; display: inline-flex; transition: transform var(--ob-duration); }
.ob-navtree__ic { width: 18px; height: 18px; color: var(--fg-2); flex: none; }
.ob-navtree__node--child { padding-left: 34px; height: 33px; font-size: 13.5px; color: var(--fg-2); }
.ob-navtree__node--active { background: var(--surface-hover); color: var(--link); font-weight: 600; }
.ob-navtree__node--active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--accent); }
.ob-navtree__count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--fg-3); }

/* ---- File upload ---- */
.ob-upload__drop { border: 2px dashed var(--border); border-radius: var(--ob-radius-lg); background: var(--bg-subtle); cursor: pointer;
	display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 20px; text-align: center; }
.ob-upload__drop:hover, .ob-upload__drop.is-over { border-color: var(--link); background: var(--surface-hover); }
.ob-upload__drop > .ob-icon { width: 34px; height: 34px; color: var(--ob-neutral-400); }
.ob-upload__t { font-size: 14px; color: var(--fg-1); white-space: nowrap; }
.ob-upload__t b { color: var(--link); font-weight: 700; }
.ob-upload__h { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.ob-upload__files { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ob-upload__file { display: flex; align-items: center; gap: 11px; border: 1px solid var(--border-subtle); border-radius: var(--ob-radius-lg); padding: 10px 12px; }
.ob-upload__file .ob-icon.ic { width: 26px; height: 26px; color: var(--ob-critical-500); flex: none; }
.ob-upload__meta { flex: 1; min-width: 0; }
.ob-upload__nm { font-size: 13.5px; font-weight: 600; color: var(--fg-1); display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; }
.ob-upload__nm span { font-weight: 400; color: var(--fg-3); font-size: 12px; }
.ob-upload__bar { height: 6px; border-radius: 999px; background: var(--bg-muted); margin-top: 7px; overflow: hidden; }
.ob-upload__bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s var(--ob-ease-standard); }
.ob-upload__st { width: 18px; height: 18px; flex: none; }
.ob-upload__st--ok { color: var(--ob-success-500); }
.ob-upload__st--x { color: var(--fg-3); cursor: pointer; }

/* ---- Service navigation cluster ---- */
.ob-svcnav { display: inline-flex; align-items: center; gap: 2px; }
.ob-svcnav__btn { position: relative; width: 40px; height: 40px; border: 0; background: transparent; border-radius: var(--ob-radius-md);
	display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2); cursor: pointer; }
.ob-svcnav__btn:hover { background: var(--surface-hover); color: var(--fg-1); }
.ob-svcnav__btn.is-on { background: var(--surface-hover); color: var(--link); }
.ob-svcnav__btn .ob-icon { width: 21px; height: 21px; }
.ob-svcnav__dot { position: absolute; top: 6px; right: 7px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
	background: var(--ob-red-500); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ob-svcnav__panel { position: absolute; margin-top: 8px; width: 320px; background: var(--surface-raised); border: 1px solid var(--border-subtle);
	border-radius: var(--ob-radius-lg); box-shadow: var(--ob-shadow-lg); overflow: hidden; z-index: var(--ob-z-tooltip); }
.ob-svcnav__ph { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); font-weight: 700; padding: 12px 14px 6px; }
.ob-svcnav__app { display: flex; align-items: center; gap: 11px; padding: 9px 14px; cursor: pointer; }
.ob-svcnav__app:hover { background: var(--surface-hover); }
.ob-svcnav__appic { width: 30px; height: 30px; border-radius: var(--ob-radius-md); background: var(--bg-muted); color: var(--fg-2); display: flex; align-items: center; justify-content: center; flex: none; }
.ob-svcnav__appic .ob-icon { width: 17px; height: 17px; }
.ob-svcnav__appmeta { min-width: 0; flex: 1; }
.ob-svcnav__appnm { font-size: 13.5px; font-weight: 600; color: var(--fg-1); white-space: nowrap; }
.ob-svcnav__appsub { font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.ob-svcnav__go { width: 15px; height: 15px; color: var(--fg-3); flex: none; }