/* Nulltage UI. Canonical source; distribute with tools/sync_ui_styles.py.
   Existing feature layouts live in the legacy layer. These shared components
   own typography, spacing and controls regardless of feature stylesheet order. */
:root {
  color-scheme: light;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #fafaf7; --paper: #fafaf7; --surface: #fff;
  --text: #15171a; --ink: #15171a; --muted: #5b6067; --line: #dad9d3;
  --accent: #c2410c; --link: #a3370e; --accent-hover: #9f360b;
  --orange: #c2410c; --orange-dark: #9f360b;
  --good: #287a4e; --bad: #b42318; --work: #a66504;
  --soft: #f1f0eb; --dark: #202528; --green: #2b735a;
  --forest: #173c32; --sage: #e9efe3; --sage-line: #d3ddca;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius: 3px; --control-height: 44px; --page-width: 1280px;
  --white: var(--surface); --hover: var(--accent-hover); --amber: var(--work);
  --title-size: clamp(32px,4vw,48px); --section-title-size: 24px; --subheading-size: 18px;
}
:where(.nt-ui) { font: 16px/1.5 var(--font-ui); letter-spacing: 0; scrollbar-gutter: stable; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
:where(.nt-ui) *, :where(.nt-ui) *::before, :where(.nt-ui) *::after { box-sizing: border-box; }
:where(.nt-ui) body { margin: 0; font: 400 16px/1.5 var(--font-ui); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
:where(.nt-ui) :is(h1,h2,h3,h4) { font-family: var(--font-ui); color: inherit; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
:where(.nt-app) h1 { font-size: var(--title-size); line-height: 1.25; margin: 0 0 24px; }
:where(.nt-ui) h2 { font-size: var(--section-title-size); line-height: 1.35; margin: 0 0 16px; }
:where(.nt-ui) :is(h3,h4) { font-size: var(--subheading-size); line-height: 1.5; margin: 0 0 12px; }
:where(.nt-ui) p { margin: 0 0 16px; }
:where(.nt-ui) small { font-size: 13px; line-height: 1.5; }
:where(.nt-ui) a { color: var(--link); text-underline-offset: 3px; }
:where(.nt-ui) :is(button,input,select,textarea) { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; }
:where(.nt-ui) :is(button,.button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); height: auto; max-width: 100%;
  padding: 9px 16px; margin: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
  font: 600 16px/24px var(--font-ui); text-decoration: none; text-align: center;
  cursor: pointer; box-shadow: none; vertical-align: middle; filter: none;
}
:where(.nt-ui) :is(button,.button):hover { background: var(--soft); border-color: var(--muted); text-decoration: none; filter: none; }
:where(.nt-ui) :is(button.primary,.button.primary,.shop-submit), :where(.nt-website) .button:not(.ghost):not(.light) {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
:where(.nt-ui) :is(button.primary,.button.primary,.shop-submit):hover, :where(.nt-website) .button:not(.ghost):not(.light):hover {
  color: #fff; background: var(--accent-hover); border-color: var(--accent-hover);
}
:where(.nt-ui) :is(button,.button).danger { color: var(--bad); border-color: var(--bad); background: var(--surface); }
:where(.nt-ui) :is(button,.button).danger:hover { background: #fff1ee; }
:where(.nt-ui) :is(button,input,select,textarea):disabled { opacity: .5; cursor: not-allowed; }
:where(.nt-ui) .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
:where(.nt-ui) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]),select,textarea) {
  min-height: var(--control-height); height: auto; max-width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background-color: var(--surface); color: var(--text); padding: 9px 12px;
  font: 400 16px/24px var(--font-ui); box-shadow: none;
}
:where(.nt-ui) select { padding-right: 36px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235b6067' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
:where(.nt-ui) select[multiple] { background-image: none; padding-right: 12px; }
:where(.nt-ui) textarea { min-height: 120px; resize: vertical; }
:where(.nt-ui) input::placeholder, :where(.nt-ui) textarea::placeholder { color: var(--muted); opacity: .8; }
:where(.nt-ui) :is(input[type=checkbox],input[type=radio]) { width: 18px; height: 18px; min-height: 0; flex: none; accent-color: var(--accent); padding: 0; vertical-align: middle; }
:where(.nt-ui) label { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--text); }
:where(.nt-ui) :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:where(.nt-ui) input:focus, :where(.nt-ui) select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.nt-ui) [hidden] { display: none !important; }
/* Identical site and application chrome. Responsive navigation remains local. */
:where(.nt-ui) :is(.app-header,.shop-header,.site-header,body>header) { background: var(--bg); border-bottom: 1px solid var(--line); height: auto; }
:where(.nt-ui) .header-inner { max-width: var(--page-width); min-height: 72px; height: auto; margin-inline: auto; padding: 12px 24px; gap: 24px; }
:where(.nt-ui) .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 800 20px/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; }
:where(.nt-ui) .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border: 2px solid var(--text); border-radius: 50%; font: 500 16px/1 ui-monospace,monospace; }
:where(.nt-ui) .brand-name { font-size: 20px; font-weight: 800; }
:where(.nt-ui) .brand-context { padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line); font: 500 14px/1.5 var(--font-ui); }
:where(.nt-ui) :is(.header-inner nav,.portal-footer nav,.shop-footer nav) { gap: 20px; font: 500 14px/1.5 var(--font-ui); }
:where(.nt-ui) .header-inner nav a { color: var(--muted); text-decoration: none; }
:where(.nt-ui) .header-inner nav :is(a:hover,a[aria-current=page]) { color: var(--accent); }
:where(.nt-ui) .header-inner nav a[aria-current=page] { font-weight: 700; }
:where(.nt-ui) :is(.logout,.desktop-logout,.mobile-logout) { font-size: 13px; gap: 12px; }
:where(.nt-ui) :is(.logout,.desktop-logout,.mobile-logout) button, :where(.nt-ui) .text-button { background: transparent; border-color: transparent; padding: 9px 0; color: var(--link); font-size: 14px; font-weight: 500; }
:where(.nt-app) :is(main,.content), :where(.nt-app) .shop-page main { width: 100%; max-width: var(--page-width); margin: 0 auto; padding: 32px 24px 64px; }
:where(.nt-app) :is(.page-heading,.gateway-heading) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; min-height: 44px; margin: 0 0 24px; }
:where(.nt-app) :is(.page-heading,.gateway-heading) h1 { margin: 0; }
:where(.nt-app) :is(.page-heading,.gateway-heading) p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
:where(.nt-app) :is(.timestamp,.muted-copy,.muted,.commerce-note,.note-cell) { font-size: 14px; line-height: 1.5; color: var(--muted); }
:where(.nt-app) :is(.section,.overview-section,.gateway-section) { margin-top: 32px; padding-top: 24px; }
:where(.nt-app) .overview-section { border-top: 0; padding-top: 0; }
:where(.nt-app) .section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
:where(.nt-app) .section-heading h2 { margin: 0; }
:where(.nt-app) .section-heading span { font-size: 14px; }
:where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav) {
  display: flex; align-items: stretch; gap: 24px; overflow-x: auto; flex-wrap: nowrap;
  border: 0; border-bottom: 1px solid var(--line); margin: 0 0 24px; padding: 0;
}
:where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav)>a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 0;
  color: var(--muted); border: 0; border-bottom: 2px solid transparent; background: transparent;
  font: 500 16px/22px var(--font-ui); white-space: nowrap; text-decoration: none;
}
:where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav)>:is(a[aria-current=page],a.active) { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }
:where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav)+.section { margin-top: 0; padding-top: 0; border-top: 0; }
:where(.nt-app) :is(.job-toolbar,.engagement-filter) { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0 0 24px; }
:where(.nt-app) :is(.status-filter,.job-search,.engagement-filter form) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 0; }
:where(.nt-app) .status-filter { padding: 0; border: 0; }
:where(.nt-app) .status-filter a { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 14px; text-decoration: none; }
:where(.nt-app) .status-filter a.selected { border-color: var(--accent); color: var(--link); background: var(--surface); }
:where(.nt-app) .ticket-tools { margin: 0 0 24px; }
:where(.nt-app) .ticket-tool { border-top: 0; padding-top: 0; }
:where(.nt-app) .ticket-tool>summary { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 16px; font-size: 16px; background: var(--surface); }
:where(.nt-app) :is(.form-grid,.customer-form,.ticket-form,.provider-form,.customer-info-form) { gap: 16px; }
:where(.nt-app) :is(.form-grid,.customer-form,.ticket-form,.provider-form,.customer-info-form,.access-form) label { font-size: 14px; line-height: 1.5; gap: 8px; color: var(--text); }
:where(.nt-ui) table { width: 100%; border-collapse: collapse; font: 400 16px/1.5 var(--font-ui); }
:where(.nt-ui) :is(th,td) { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
:where(.nt-ui) th { font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .025em; }
:where(.nt-app) :is(.ops-table,.provider-table) th { font-size: 12px; }
:where(.nt-ui) td small { font-size: 13px; }
:where(.nt-app) :is(.history-pages,.ticket-pages) { margin: 24px 0 0; font-size: 14px; gap: 16px; }
:where(.nt-app) :is(.overview-metrics,.operations-summary,.portal-summary,.gateway-metrics) { margin-block: 0 32px; }
:where(.nt-app) :is(.overview-metrics a,.operations-summary-item,.portal-summary>div,.gateway-metrics>div) { padding: 20px 16px; }
:where(.nt-app) :is(.overview-metrics a,.operations-summary-item,.portal-summary>div,.gateway-metrics>div):first-child { padding-left: 0; }
:where(.nt-app) :is(.overview-metrics strong,.operations-summary strong,.portal-summary strong,.gateway-metrics strong) { font: 700 32px/1.2 var(--font-ui); margin-top: 8px; }
:where(.nt-app) :is(.overview-metrics span,.operations-summary span,.portal-summary span,.gateway-metrics span) { font: 600 12px/1.5 var(--font-ui); text-transform: uppercase; color: var(--muted); }
:where(.nt-app) :is(.overview-metrics small,.operations-summary small,.portal-summary small) { font-size: 13px; }
:where(.nt-app) :is(.facts dt,.checks span,.details dt,.live-stats span) { font-size: 12px; color: var(--muted); line-height: 1.5; }
:where(.nt-app) :is(.state,.status,.operations-badge) { font-size: 14px; }
:where(.nt-app) :is(.good,.online,.operations-level-ok) { color: var(--good); }
:where(.nt-app) :is(.bad,.offline,.operations-level-error) { color: var(--bad); }
:where(.nt-app) :is(.working,.operations-level-warn) { color: var(--work); }
:where(.nt-app) .operations-card { padding: 20px; }
:where(.nt-app) .operations-card h3 { font-size: 16px; margin: 0; }
:where(.nt-app) .operations-card p { font-size: 16px; }
:where(.nt-app) .operations-card small { font-size: 13px; }
:where(.nt-app) :is(.message,.shop-error) { margin: 0 0 24px; padding: 16px; border-left: 3px solid var(--accent); background: var(--soft); font-size: 16px; }
:where(.nt-app) .message.error { border-color: var(--bad); background: #fff1ee; }
:where(.nt-app) dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); }
:where(.nt-app) dialog::backdrop { background: #15171a80; }
:where(.nt-app) .gateway-detail-section { padding: 24px 0; }
:where(.nt-app) :is(.gateway-remove,.gateway-operation-history-section,.gateway-remove details) { border-top: 0; }
:where(.nt-app) :is(.portal-footer,.shop-footer) { max-width: var(--page-width); padding: 24px; margin-inline: auto; font-size: 13px; color: var(--muted); }
/* Shop uses the same components as Portal; only the display heading is larger. */
:where(.nt-app) .shop-page { background: var(--bg); color: var(--text); }
:where(.nt-app) .shop-intro h1 { color:var(--text); font-size: clamp(32px,4.5vw,48px); line-height: 1.15; }
:where(.nt-app) .shop-intro h1 span { color:var(--text); }
:where(.nt-app) .shop-intro h1 span:last-child { color:var(--green); }
:where(.nt-app) :is(.shop-eyebrow,.shop-benefits>div>span) { color:var(--accent); }
:where(.nt-app) :is(.shop-intro>p:last-child,.shop-benefits p,.shop-delivery,.shop-plan-copy,.shop-recurring,.shop-payment-note) { color: var(--muted); }
:where(.nt-app) :is(.shop-field,.shop-contact label,.shop-terms) { font-size: 14px; }
:where(.nt-app) .shop-checkout { border-color: var(--line); border-top-color: var(--accent); border-radius: var(--radius); padding: 24px; box-shadow: none; }
:where(.nt-app) .shop-checkout h2 { font-size: var(--section-title-size); }
:where(.nt-app) .shop-quantity { border: 0; border-radius: var(--radius); grid-template-columns: 44px 64px 44px; gap: 0; }
:where(.nt-app) .shop-quantity button { padding: 9px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); font-size: 20px; }
:where(.nt-app) .shop-quantity input { padding: 9px 0; border-radius: 0; border-inline: 0; }
:where(.nt-app) .shop-submit { justify-content: space-between; width: 100%; }
:where(.nt-app) .auth-page main { padding: 48px 24px 64px; }
:where(.nt-app) .auth-login { width: min(100%,480px); padding: 32px; box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
:where(.nt-app) .auth-login h1 { font-size: var(--title-size); }
:where(.nt-app) :is(.auth-brand-name,.auth-brand .brand-name) { font-family: var(--font-ui); }
/* Website display hierarchy, using the same tokens and controls. */
:where(.nt-website) .wrap { width: min(100% - 48px,1232px); }
:where(.nt-website) h1 { font-size: clamp(40px,5vw,64px); line-height: 1.1; margin: 0 0 24px; }
:where(.nt-website) h2 { font-size: clamp(28px,3vw,36px); line-height: 1.2; margin: 0 0 24px; }
:where(.nt-website) h3 { font-size: 20px; line-height: 1.35; }
:where(.nt-website) .header-inner.wrap { width: 100%; }
:where(.nt-website) .header-inner>.button { font-size: 16px; min-height: 44px; padding: 9px 16px; }
:where(.nt-website) :is(.eyebrow,.plan .label,.value-grid b) { font: 600 12px/1.5 var(--font-ui); color: var(--accent); }
:where(.nt-website) :is(.value-strip,.plans,.scenario,.pilot-band,.system-map) { background: var(--soft); }
:where(.nt-website) .hero .eyebrow { color: #ffb999; }
:where(.nt-website) :is(.dark,.use-detail,.scenario-panel,.footer) { background: var(--dark); }
:where(.nt-website) .button.ghost { color: var(--text); background: transparent; border-color: var(--line); }
:where(.nt-website) :is(.hero,.dark,.cta) .button.ghost { color: #fff; border-color: #ffffff99; }
:where(.nt-website) .button.light { color: var(--text); background: var(--surface); border-color: var(--surface); }
:where(.nt-website) :is(.hardware-price strong,.plan .price .amount) { font-family: var(--font-ui); }
:where(.nt-website) .band { padding: 64px 0; }
:where(.nt-website) .product-matrix thead th { font-size: 14px; border-top: 1px solid var(--line); }
:where(.nt-website) .product-matrix tbody th { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--text); }
:where(.nt-website) .use-tabs button { display: block; text-align: left; padding: 20px; font-weight: 400; }
:where(.nt-website) .use-tabs button[aria-selected=true] { border-color: var(--accent); background: var(--surface); }
:where(.nt-website) .use-tabs strong { font: 700 20px/1.35 var(--font-ui); }
:where(.nt-website) .scenario-tabs button { background: transparent; color: #fff; border-color: #ffffff44; }
:where(.nt-website) .scenario-tabs button[aria-selected=true] { color: var(--text); background: var(--soft); }
@media(max-width: 700px) {
  :where(.nt-ui) .header-inner { padding: 12px 16px; min-height: 64px; gap: 12px; }
  :where(.nt-ui) .brand-context { display: none; }
  :where(.nt-app) :is(main,.content), :where(.nt-app) .shop-page main { padding: 24px 16px 48px; }
  :where(.nt-app) :is(.page-heading,.gateway-heading) { gap: 12px; margin-bottom: 24px; }
  :where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav) { gap: 20px; }
  :where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav)>a { font-size: 14px; }
  :where(.nt-app) .overview-metrics strong { font-size: 28px; }
  :where(.nt-app) :is(.section,.overview-section,.gateway-section) { margin-top: 24px; }
  :where(.nt-app) .auth-page main { padding: 32px 16px 48px; }
  :where(.nt-app) .auth-login { padding: 24px; }
  :where(.nt-website) .wrap { width: calc(100% - 32px); }
  :where(.nt-website) .band { padding: 48px 0; }
  :where(.nt-website) .use-tabs button { padding: 12px 8px; }
  :where(.nt-website) .use-tabs strong { font-size: 16px; }
  :where(.nt-ui) :is(.portal-footer,.shop-footer) { padding: 24px 16px; }
}
@media(prefers-reduced-motion: reduce) { :where(.nt-ui) { scroll-behavior: auto; } }

/* Shared component details, including compact metadata and disclosures. */
:where(.nt-app) :is(.operations-context p,.operations-context a,.operations-issues p,.history-pages span,.inventory-health-detail,.system-facts dt) { font-size: 13px; color: var(--muted); }
:where(.nt-app) .operations-summary-item { display: block; }
:where(.nt-app) .operations-summary-item span { display: block; }
:where(.nt-app) .operations-summary-item strong { display: block; }
:where(.nt-app) :is(.operations-filters,.engagement-filter) label { font-size: 14px; }
:where(.nt-app) .operations-badge { font-size: 12px; }
:where(.nt-app) :is(.operations-text-ok,.operations-level-ok) { color: var(--good); }
:where(.nt-app) :is(.operations-text-warn,.operations-level-warn) { color: var(--work); }
:where(.nt-app) :is(.operations-text-error,.operations-level-error) { color: var(--bad); }
:where(.nt-app) :is(.account-plan-form,.account-form,.gateway-remove-form) label { font-size: 14px; color: var(--text); gap: 8px; }
:where(.nt-app) :is(.account-plan-current span,.account-status-grid span,.account-disclosure>summary span) { font-size: 13px; }
:where(.nt-app) :is(.account-disclosure,.account-admin-action)>summary { font-size: 16px; min-height: 48px; }
:where(.nt-app) :is(.account-plan-current strong,.account-status-grid strong) { font-size: 16px; }
:where(.nt-app) .account-plan-section>.muted-copy { font-size: 14px; }
:where(.nt-website) .menu-toggle { display: none; }
:where(.nt-website) :is(.use-detail p,.use-facts li,.scenario-content p,.dark p,.dark .lead,.fact-row span) { color: #d6dbdc; }
:where(.nt-website) :is(.use-detail .eyebrow,.dark .eyebrow) { color: #ffb999; }
:where(.nt-website) :is(.plan,.system-map,.use-tabs button,.value-grid>div) { border-color: var(--line); }
:where(.nt-website) .plan.emphasis { border-top-color: var(--accent); }
:where(.nt-website) .use-tabs .num { font: 600 12px/1.5 var(--font-ui); }
@media(max-width:940px) { :where(.nt-website) .menu-toggle { display: inline-flex; } :where(.nt-website) .header-inner nav { top: 100%; } }
@media(max-width:700px) { :where(.nt-app) .operations-summary-item { padding: 16px 12px; } :where(.nt-app) .operations-summary-item:nth-child(odd) { padding-left: 0; } }

:where(.nt-ui) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]),select:not([multiple])) { height: var(--control-height); }

:where(.nt-app) main>h1 { display: flex; align-items: center; min-height: 44px; }
:where(.nt-app) main>a:not(.button)+h1 { margin-top: 16px; }

:where(.nt-app) .overview-metrics a { color: var(--text); }
:where(.nt-app) .overview-section .table-wrap { border-bottom: 0; }
:where(.nt-app) .operations-filters { gap: 16px; margin: 24px 0; padding: 16px 0; }

:where(.nt-public-status) .state { font-size: 20px; }


/* Homepage component contract: paper, orange actions, forest/sage context, one chrome. */
:where(.nt-ui) .eyebrow { display:block; margin:0 0 16px; font:600 12px/1.5 var(--font-ui); letter-spacing:.045em; text-transform:uppercase; color:var(--accent); }
:where(.nt-ui) .text-link { color:var(--link); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
:where(.nt-ui) :is(button,.button).primary { color:#fff; background:var(--accent); border-color:var(--accent); }
:where(.nt-ui) :is(button,.button).primary:hover { color:#fff; background:var(--accent-hover); border-color:var(--accent-hover); }
:where(.nt-ui) :is(button,.button).ghost { color:var(--text); background:var(--surface); border-color:var(--line); }
:where(.nt-ui) :is(button,.button).ghost:hover { background:var(--soft); border-color:var(--muted); }
:where(.nt-ui) :is(button,.button)[aria-pressed=true]:not(.primary) { color:var(--forest); background:var(--sage); border-color:var(--green); }
:where(.nt-ui) .nt-header { position:relative; flex:none; z-index:25; background:var(--bg); border-bottom:1px solid var(--line); }
/* Reset legacy flex direction and logo width too: Portal once stacked these on mobile. */
:where(.nt-ui) .nt-header .header-inner { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; width:100%; max-width:var(--page-width); margin:auto; min-height:72px; padding:12px 24px; gap:16px; position:relative; }
:where(.nt-ui) .nt-header .brand { flex:none; width:auto; min-width:0; margin:0; font:800 20px/1.2 var(--font-ui); letter-spacing:0; gap:10px; }
:where(.nt-ui) .nt-header .brand-context { color:var(--muted); font:500 14px/1.5 var(--font-ui); letter-spacing:0; }
:where(.nt-ui) .nt-header .nt-navigation { display:flex; align-items:center; justify-content:flex-end; gap:20px; margin:0 0 0 auto; padding:0; width:auto; font:500 14px/1.5 var(--font-ui); }
:where(.nt-ui) .nt-header .nt-navigation>a,:where(.nt-ui) .nt-header .nt-navigation>details>summary { display:inline-flex; align-items:center; min-height:44px; padding:10px 0; color:var(--muted); background:none; border:0; border-radius:0; font:500 14px/1.5 var(--font-ui); white-space:nowrap; text-decoration:none; box-shadow:none; cursor:pointer; }
:where(.nt-ui) .nt-header .nt-navigation>a:hover,:where(.nt-ui) .nt-header .nt-navigation>details>summary:hover { color:var(--accent); }
:where(.nt-ui) .nt-header .nt-navigation>a[aria-current=page],:where(.nt-ui) .nt-header .nt-navigation>details.is-current>summary { color:var(--forest); font-weight:700; box-shadow:inset 0 -2px var(--green); }
:where(.nt-ui) .nt-header .nt-header-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0; margin:0 0 0 4px; }
:where(.nt-ui) .nt-header .nt-header-actions form { display:contents; margin:0; }
:where(.nt-ui) .nt-header .nt-header-actions :is(button,.button) { min-height:44px; padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius); font:600 16px/24px var(--font-ui); background:var(--surface); color:var(--text); text-decoration:none; box-shadow:none; white-space:nowrap; }
:where(.nt-ui) .nt-header .nt-header-actions :is(button,.button):hover { background:var(--soft); border-color:var(--muted); }
:where(.nt-ui) .nt-header .nt-header-actions small { color:var(--muted); font-size:12px; }
:where(.nt-ui) .nt-header .nt-menu-toggle { display:none; min-height:44px; padding:9px 16px; font:600 16px/24px var(--font-ui); margin-left:auto; }
:where(.nt-ui) .nt-header .nt-navigation>details { position:relative; margin:0; border:0; padding:0; }
:where(.nt-ui) .nt-header .nt-navigation>details>summary { list-style:none; gap:9px; }
:where(.nt-ui) .nt-header .nt-navigation>details>summary::-webkit-details-marker { display:none; }
:where(.nt-ui) .nt-header .nt-navigation>details>summary:after { content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
:where(.nt-ui) .nt-header .nt-navigation>details[open]>summary:after { transform:translateY(2px) rotate(225deg); }
:where(.nt-ui) .nt-header .support-nav-panel { position:absolute; z-index:30; top:calc(100% + 8px); left:-12px; min-width:220px; padding:8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 8px 24px #20252812; }
:where(.nt-ui) .nt-header .support-nav-panel a { display:flex; align-items:center; min-height:44px; padding:10px 12px; color:var(--muted); border-radius:var(--radius); text-decoration:none; font:500 14px/1.5 var(--font-ui); box-shadow:none; }
:where(.nt-ui) .nt-header .support-nav-panel a:is(:hover,[aria-current=page]) { background:var(--sage); color:var(--forest); }
:where(.nt-app) :is(main,.content),:where(.nt-household) main.wrap { width:100%; max-width:var(--page-width); padding:40px 24px 64px; margin:0 auto; }
:where(.nt-app) :is(.page-heading,.gateway-heading)>div:first-child { padding-left:0; border-left:0; }
:where(.nt-app) :is(.page-heading,.gateway-heading) h1 { color:var(--text); }
:where(.nt-app) :is(.page-heading,.gateway-heading) { margin-bottom:28px; }
:where(.nt-ui) :is(.nt-context-panel,.privacy-box,.next-card,.shop-context,.diagram-light) { background:var(--sage); color:var(--forest); border:1px solid var(--sage-line); border-radius:var(--radius); }
:where(.nt-ui) :is(.nt-context-panel,.shop-context,.diagram-light) { padding:24px; }
:where(.nt-ui) :is(.nt-context-panel,.shop-context,.diagram-light) p:last-child { margin-bottom:0; }
:where(.nt-app) :is(.panel,.plain-panel,.commerce-panel,.operations-card,.auth-login,.login-section,.login-area) { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; }
:where(.nt-app) :is(.overview-metrics,.operations-summary,.portal-summary,.gateway-metrics) { background:var(--surface); border-color:var(--line); }
:where(.nt-app) :is(.overview-metrics strong,.operations-summary strong,.portal-summary strong,.gateway-metrics strong) { color:var(--text); }
:where(.nt-app) .overview-metrics .metric-alert { color:var(--work); }
:where(.nt-ui) thead { background:var(--soft); }
:where(.nt-ui) :is(.table-wrap,.mesh-node-table-scroll) { border-radius:var(--radius); }
:where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav,.section-nav)>:is(a[aria-current=page],a.active) { color:var(--forest); border-bottom-color:var(--green); background:none; box-shadow:none; }
:where(.nt-app) :is(.settings-nav,.operations-nav,.gateway-detail-nav,.ticket-filters,.account-nav,.access-nav,.section-nav)>a { font:500 16px/22px var(--font-ui); }
:where(.nt-ui) :is(.site-footer,.nt-footer,.portal-footer,.shop-footer) { width:100%; max-width:none; background:var(--soft); color:var(--text); padding:32px 0 24px; margin:0; border-top:1px solid var(--line); }
:where(.nt-ui) .footer-inner { width:100%; max-width:var(--page-width); padding:0 24px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
:where(.nt-ui) .footer-inner p { color:var(--muted); font-size:14px; margin:0; }
:where(.nt-ui) .footer-inner nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-left:auto; font:500 13px/1.5 var(--font-ui); }
:where(.nt-ui) .footer-inner nav a { color:var(--link); text-decoration:none; }
:where(.nt-ui) .footer-inner nav a:hover { text-decoration:underline; }
:where(.nt-ui) :is(.login-area,.auth-login,.login-section) { max-width:480px; margin:24px auto 48px; padding:32px; }
:where(.nt-ui) :is(.login-area,.auth-login,.login-section) h1 { font-size:32px; line-height:1.2; margin-bottom:24px; }
:where(.nt-ui) .auth-brand { display:none; }
:where(.nt-ui) .auth-page main { padding:40px 24px 64px; }
:where(.nt-ui) .login-title-detail { display:block; font:400 16px/1.5 var(--font-ui); color:var(--muted); margin-top:12px; }
/* Shared mesh actions use the same controls, links and table typography as the rest of the product. */
:where(.nt-ui) .mesh-node-table table { font:400 16px/1.5 var(--font-ui); }
:where(.nt-ui) .mesh-node-table th { background:var(--soft); font:600 12px/1.5 var(--font-ui); text-transform:uppercase; letter-spacing:.025em; }
:where(.nt-ui) .mesh-node-table .mesh-node-map,:where(.nt-ui) .mesh-chat-message-actions button,:where(.nt-ui) .mesh-chat-unread button { min-height:44px; padding:9px 16px; font:600 16px/24px var(--font-ui); border-radius:var(--radius); }
:where(.nt-ui) .mesh-node-table .mesh-node-name>button.mesh-node-contact { min-height:44px; color:var(--link); font:600 16px/1.5 var(--font-ui); text-decoration:underline; text-underline-offset:3px; border:0; background:none; padding:0; text-align:left; justify-content:flex-start; }
:where(.nt-ui) .mesh-node-table .mesh-node-sort { font:inherit; text-transform:inherit; letter-spacing:inherit; min-height:44px; }
:where(.nt-ui) .mesh-node-table .mesh-node-favorite { font-size:23px; min-width:44px; min-height:44px; color:var(--accent); background:none; border:0; padding:4px; }
:where(.nt-ui) .mesh-chat-log { background:var(--surface); border-radius:var(--radius); }
:where(.nt-ui) .mesh-chat-dialog { border-radius:var(--radius); }
@media(max-width:1150px) and (min-width:1001px) {
 :where(.nt-ui) .nt-header .brand-context { display:none; }
 :where(.nt-ui) .nt-header .header-inner { gap:12px; }
 :where(.nt-ui) .nt-header .nt-navigation { gap:8px; }
}
@media(max-width:1000px) {
 :where(.nt-ui) .nt-header .header-inner { flex-wrap:wrap; gap:12px; }
 :where(.nt-ui) .nt-header .brand-context { display:none; }
 :where(.nt-ui) .nt-header[data-enhanced=true] .nt-menu-toggle { display:inline-flex; }
 :where(.nt-ui) .nt-header .nt-navigation { flex:1 1 100%; width:100%; display:flex; align-items:stretch; justify-content:flex-start; flex-direction:column; margin:0; gap:0; }
 :where(.nt-ui) .nt-header[data-enhanced=true] .nt-navigation { display:none; position:absolute; z-index:40; top:100%; left:0; right:0; width:100%; max-height:calc(100dvh - 84px); overflow:auto; padding:12px 24px 20px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 8px 16px #20252812; }
 :where(.nt-ui) .nt-header[data-enhanced=true] .nt-navigation[data-open=true] { display:flex; }
 :where(.nt-ui) .nt-header .nt-navigation>a,:where(.nt-ui) .nt-header .nt-navigation>details>summary { width:100%; padding:12px; min-height:44px; }
 :where(.nt-ui) .nt-header .nt-navigation>a[aria-current=page],:where(.nt-ui) .nt-header .nt-navigation>details.is-current>summary { box-shadow:none; color:var(--forest); background:var(--sage); border-radius:var(--radius); }
 :where(.nt-ui) .nt-header .nt-header-actions { flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--line); }
 :where(.nt-ui) .nt-header .support-nav-panel { position:static; min-width:0; border:0; padding:0 0 8px 12px; background:none; box-shadow:none; }
 :where(.nt-ui) .nt-header .support-nav-panel a { padding:10px 12px; }
}
@media(max-width:700px) {
 :where(.nt-ui) .nt-header .header-inner { padding:12px 16px; min-height:68px; }
 :where(.nt-ui) .nt-header[data-enhanced=true] .nt-navigation { padding:12px 16px 20px; }
 :where(.nt-app) :is(main,.content),:where(.nt-household) main.wrap { padding:28px 16px 48px; }
 :where(.nt-app) :is(.page-heading,.gateway-heading) { margin-bottom:24px; }
 :where(.nt-ui) .footer-inner { padding:0 16px; align-items:flex-start; }
 :where(.nt-ui) .footer-inner nav { margin-left:0; width:100%; }
 :where(.nt-ui) :is(.login-area,.auth-login,.login-section) { padding:24px; margin-top:12px; }
}

/* Shared remaining primitives, including forms and bounded dialogs. */
:where(.nt-ui) body { min-height:100dvh; display:flex; flex-direction:column; }
:where(.nt-ui) body>main { flex:1 0 auto; }
:where(.nt-ui) .brand { color:var(--text); }
:where(.nt-ui) .brand>span:not(.brand-mark):not(.brand-context) { color:inherit; font:inherit; }
:where(.nt-ui) .brand>.brand-context { color:var(--muted); font:500 14px/1.5 var(--font-ui); }
:where(.nt-ui) :is(.site-footer,.nt-footer) .brand { color:var(--text); }
:where(.nt-ui) .footer-logo { width:32px; height:32px; border:2px solid var(--text); font:500 16px/1 ui-monospace,monospace; }
:where(.nt-ui) .text-button { min-height:44px; padding:9px 0; border-color:transparent; background:none; color:var(--link); font:500 16px/24px var(--font-ui); text-decoration:underline; }
:where(.nt-app) dialog { width:min(760px,calc(100vw - 32px)); max-width:calc(100vw - 32px); overflow:auto; }
:where(.nt-ui) dialog.newsletter-dialog { width:min(540px,calc(100vw - 32px)); }
:where(.nt-ui) dialog:is(#configuration,#mesh-settings-dialog) { width:min(960px,calc(100vw - 32px)); }
:where(.nt-ui) dialog:is(#map-dialog,#mesh-map-dialog) { width:min(1280px,calc(100vw - 32px)); max-width:calc(100vw - 32px); }
:where(.nt-household) .account-layout { padding:16px 0 40px; }
:where(.nt-household) .field { display:grid; gap:8px; margin:0 0 16px; }
:where(.nt-household) .form-grid .field { margin-bottom:0; }
:where(.nt-household) .panel { padding:24px; }
:where(.nt-household) .cloud-state { padding:20px 24px; border:1px solid var(--sage-line); border-left:3px solid var(--green); border-radius:var(--radius); background:var(--sage); }
:where(.nt-household) .cloud-state.has-conflict { border-left-color:var(--work); background:#fff6e6; }
:where(.nt-household) .conflict-options>div { border-color:var(--line); border-radius:var(--radius); }
@media(max-width:650px){:where(.nt-household) .cloud-state{padding:16px}}

/* One compact footer for website and customer Portal, including JS shells. */
:where(.nt-ui) .nt-global-footer { padding:24px 0; margin-top:auto; }
:where(.nt-ui) .nt-footer-content { max-width:var(--page-width); margin:0 auto; padding:0 24px; }
:where(.nt-ui) .nt-footer-brand { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin-bottom:16px; }
:where(.nt-ui) .nt-footer-brand .brand { font:800 20px/24px var(--font-ui); gap:10px; }
:where(.nt-ui) .nt-footer-brand p { margin:0; font:400 14px/21px var(--font-ui); color:var(--muted); }
:where(.nt-ui) .nt-global-footer nav { display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; margin:0; padding:0; }
:where(.nt-ui) .nt-global-footer nav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0; font:500 14px/21px var(--font-ui); color:var(--link); text-decoration:none; border:0; background:none; border-radius:0; }
:where(.nt-ui) .nt-global-footer nav a:hover { text-decoration:underline; }
:where(.nt-ui) .nt-global-footer :is(.nt-footer-note,.nt-footer-context) { margin:12px 0 0; font:400 12px/18px var(--font-ui); color:var(--muted); max-width:100%; }
:where(.nt-ui) .nt-global-footer .nt-footer-context:empty { display:none; }
@media(max-width:700px) {
 :where(.nt-ui) .nt-footer-content { padding:0 16px; }
 :where(.nt-ui) .nt-global-footer nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; align-items:stretch; }
 :where(.nt-ui) .nt-global-footer nav a { overflow-wrap:anywhere; }
}

/* Public contact and legal pages keep a clear route back to the website. */
:where(.nt-ui) .nt-public-return { margin:0 0 24px; font-size:14px; }
:where(.nt-ui) .nt-contact-page { max-width:680px; }
:where(.nt-ui) .nt-contact-form { display:grid; gap:20px; margin:24px 0 0; }
:where(.nt-ui) .nt-contact-form label { display:grid; gap:8px; }
:where(.nt-ui) .nt-contact-form p { margin:0; }
:where(.nt-ui) .nt-contact-form>button { justify-self:start; }
:where(.nt-ui) .nt-contact-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:where(.nt-ui) .nt-email-address { white-space:nowrap; }

:where(.nt-ui) .nt-public-info { padding-top:32px; padding-bottom:48px; }
:where(.nt-ui) .nt-public-info .site-copy-body,:where(.nt-ui) .nt-public-info .legal-text { white-space:pre-wrap; overflow-wrap:anywhere; }
:where(.nt-ui) .nt-public-info h1 { font-size:var(--title-size); line-height:1.25; margin:0 0 24px; }