/* UpSystems component styles used by this site: a subset of the design system's components/bundle.css, rules
   copied as they are (class names us-* are the contract). Add a component here by copying it from the bundle. */
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; }
.us-h1, .us-h2, .us-h3, .us-display { font-family: var(--font-display); font-weight: 700; margin: 0; color: var(--ink); }
.us-display { font-size: 32px; line-height: 1.15; }
.us-h1 { font-size: 26px; line-height: 1.2; }
.us-h2 { font-size: 19px; line-height: 1.25; }
.us-h3 { font-size: 16px; line-height: 1.3; }
.us-muted { color: var(--muted); }
.us-overline { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.us-id { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; font-size: 14px; }
.us-btn:focus-visible, .us-nav-item:focus-visible, .us-seg:focus-visible, a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Button */
.us-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 18px; border: 1px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 600 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 140ms ease-out, filter 140ms ease-out; box-sizing: border-box; }
.us-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.us-btn-primary { background: var(--mint); border-color: var(--mint); }
.us-btn-primary:hover { filter: brightness(0.94); }
.us-btn-secondary:hover { background: var(--surface-sunken); }
.us-btn-sm { min-height: var(--control-height-sm); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); font-size: 13px; }

/* StatusPill */
.us-pill { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.us-pill-dot { width: 7px; height: 7px; border-radius: var(--radius-circle); background: currentColor; flex: none; }
.us-pill-watch { background: var(--amber-soft); color: var(--amber-text); }
.us-pill-watch .us-pill-dot { background: var(--amber); }
.us-pill-plan { background: var(--orange-soft); color: var(--orange-text); }
.us-pill-plan .us-pill-dot { background: var(--orange); }
.us-pill-attention { background: var(--red-soft); color: var(--red-text); }
.us-pill-attention .us-pill-dot { background: var(--red); }
.us-pill-info { background: var(--cyan-soft); color: var(--ink); }
.us-pill-info .us-pill-dot { background: var(--cyan); }

/* Notice */
.us-notice { display: flex; gap: var(--space-3); padding: 14px 18px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--ink); font-size: 15px; line-height: 1.45; color: var(--ink); }
.us-notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.us-notice-title { font-weight: 700; display: block; }
.us-notice-body { color: var(--ink-soft); font-size: 15px; }
.us-notice-info { background: var(--cyan-soft); border: 0; font-size: 13px; }
.us-notice-info .us-notice-body { font-size: 13px; }

/* Card */
.us-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; box-sizing: border-box; }
.us-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.us-card-link { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }

/* AppHeader */
.us-header { height: var(--header-height); background: var(--ink); color: var(--on-ink); display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-6); box-sizing: border-box; font-family: var(--font-sans); overflow: hidden; }
.us-header-brand { display: flex; align-items: center; gap: 14px; flex: none; white-space: nowrap; }
.us-header-brand img { height: 36px; width: auto; display: block; }
.us-header-rule { width: 1px; height: 28px; background: var(--header-field-line); }
.us-header-product { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.us-header-spacer { flex: 1; }
.us-header-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; white-space: nowrap; }
.us-segmented { display: inline-flex; border: 1px solid var(--header-field-line); border-radius: var(--radius-sm); overflow: hidden; }
.us-seg { height: var(--control-height-xs); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--on-ink); font: 600 13px var(--font-sans); cursor: pointer; }
.us-seg[aria-pressed="true"], .us-seg[aria-current="true"] { background: var(--surface-raised); color: var(--ink); }

/* SideNav */
.us-sidenav { width: var(--sidenav-width); background: var(--surface-raised); border-right: 1px solid var(--line); padding: 14px 0; box-sizing: border-box; font-family: var(--font-sans); }
.us-nav-group { padding: 16px 20px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.us-nav-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); padding: 0 16px 0 17px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 400; cursor: pointer; }
.us-nav-item:hover { background: var(--surface-sunken); }
.us-nav-item[aria-current="page"] { border-left-color: var(--cyan); background: var(--cyan-soft); font-weight: 600; }
.us-nav-item svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* DataTable */
.us-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--surface-raised); }
.us-table th { text-align: left; padding: 10px 20px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.us-table td { padding: 11px 20px; border-bottom: 1px solid var(--surface); vertical-align: middle; }
.us-table tr:last-child td { border-bottom: 0; }
.us-table-row:hover td { background: var(--surface-sunken); }
.us-cell-primary { font-weight: 700; color: var(--ink); line-height: 1.25; }
.us-cell-sub { font-size: 12px; color: var(--muted); font-weight: 400; }
.us-table .us-id { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.us-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }