/* pudding's shared palette and self-hosted type, without layout overrides. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/noto-sans-tc-wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* 2026-10 redesign: one dark system. Token names keep their historical
     meaning in the stylesheet (cocoa = main ink, cream-soft = page, white =
     raised surface); only the values move to the dark palette. Shadows stay
     dark because --pudding-cocoa-rgb is used almost only for shadows/scrims. */
  --pudding-cocoa: #f3ede4;
  --pudding-taupe: #aba092;
  --pudding-golden: #e9b66b;
  --pudding-chocolate: #d9b48a;
  --pudding-cream-soft: #0f0b09;
  --pudding-cream: #241c16;
  --pudding-line: #2c241e;
  --pudding-white: #17120f;
  --pudding-success: #8dbb9c;
  --pudding-warning: #e3a866;
  --pudding-error: #f08a7e;
  --pudding-cocoa-rgb: 0, 0, 0;
  --pudding-taupe-rgb: 171, 160, 146;
  --pudding-golden-rgb: 233, 182, 107;
  --pudding-chocolate-rgb: 217, 180, 138;
  --pudding-cream-soft-rgb: 15, 11, 9;
  --pudding-cream-rgb: 36, 28, 22;
  --pudding-line-rgb: 44, 36, 30;
  --pudding-white-rgb: 23, 18, 15;
  --pudding-success-rgb: 141, 187, 156;
  --pudding-warning-rgb: 227, 168, 102;
  --pudding-error-rgb: 240, 138, 126;
  --pudding-surface-2: #201915;
  --pudding-ink-rgb: 243, 237, 228;
  --pudding-scout: #8dbb9c;
  --pudding-reach: #e9a9a0;
  --pudding-deal: #86b4c1;
  --pudding-clear: #a3b6e0;
  --pudding-pay: #e3a866;
  --pudding-scout-badge: #4e7a5e;
  --pudding-reach-badge: #a4544a;
  --pudding-deal-badge: #3d6b78;
  --pudding-clear-badge: #26406a;
  --pudding-pay-badge: #a8641c;
  --pudding-card-radius: 24px;
  --pudding-frame-radius: 26px;
  --pudding-control-radius: 999px;
  --pudding-secondary: #2a221c;
  /* Approved illustrative UI cards on paintings, never live account data. */
  --pudding-demo-paper: rgba(255, 253, 248, .96);
  --pudding-demo-ink: #2a1e17;
  --pudding-demo-muted: #6b5e55;
  --pudding-demo-line: #eee6da;
  --pudding-demo-bar-start: #f2b35e;
  --pudding-demo-bar-end: #c47a2c;
  color-scheme: dark;
  --pudding-font: "Plus Jakarta Sans", "Noto Sans TC", system-ui, sans-serif;
  --sans: var(--pudding-font);
  --serif: var(--pudding-font);
  font-family: var(--pudding-font);
  color: var(--pudding-cocoa);
  background: var(--pudding-cream-soft);
}

body,
button,
input,
select,
textarea {
  font-family: var(--pudding-font);
}

/* Shared primitives, shipped unchanged to native and React pages. */
.pudding-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--pudding-control-radius);
  background: var(--pudding-cocoa);
  color: var(--pudding-cream-soft);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s;
}
.pudding-button.secondary {
  background: var(--pudding-secondary);
  color: var(--pudding-cocoa);
  border-color: var(--pudding-line);
}
.pudding-button.secondary:hover { background: #362b23; }
.pudding-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(0 0 0 / 30%);
}
.pudding-card,
.pudding-empty {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--pudding-line);
  border-radius: var(--pudding-card-radius);
  background: var(--pudding-white);
  color: var(--pudding-cocoa);
}
.pudding-card { transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s; }
.pudding-card:hover { transform: translateY(-4px); border-color: #3d3229; }
.pudding-frame { position: relative; overflow: hidden; border-radius: var(--pudding-frame-radius); background: #3b4766; isolation: isolate; }
.pudding-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px rgb(15 11 9 / 22%); }
.pudding-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pudding-service-icon { display: inline-block; flex-shrink: 0; object-fit: contain; }
.pudding-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--pudding-line);
  border-radius: 999px;
  color: var(--pudding-clear);
  background: var(--pudding-surface-2);
}
.pudding-status[data-state="success"] { color: var(--pudding-success); }
.pudding-status[data-state="warning"] { color: var(--pudding-warning); }
.pudding-status[data-state="error"] { color: var(--pudding-error); }
.pudding-table-wrap { max-width: 100%; overflow-x: auto; }
.pudding-table { width: 100%; border-collapse: collapse; text-align: start; }
.pudding-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--pudding-line); }
.pudding-table th { color: var(--pudding-taupe); font-weight: 600; }
.pudding-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pudding-pagination :is(a, button) { min-width: 44px; min-height: 44px; }
.pudding-empty { text-align: center; }
.pudding-empty p { color: var(--pudding-taupe); }
.pudding-field { display: grid; gap: 6px; min-width: 0; }
.pudding-field :is(input, select, textarea) {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--pudding-line);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 16px;
  color: var(--pudding-cocoa);
  background: var(--pudding-surface-2);
}
.pudding-dialog {
  max-width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px;
  color: var(--pudding-cocoa);
  background: var(--pudding-white);
  border: 1px solid var(--pudding-line);
  border-radius: var(--pudding-card-radius);
}
.pudding-dialog::backdrop { background: rgb(0 0 0 / 65%); }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pudding-golden);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :is(.pudding-button, .pudding-card) { transition: none; }
  :is(.pudding-button, .pudding-card):hover { transform: none; }
}

/* These controls sit on the cream sidebar/header surfaces. */
.portal-shell .portal-mobile-language .language-selector,
.portal-shell .portal-mobile-language .language-selector select,
.brand-home .corporate-header .language-selector,
.brand-home .corporate-header .language-selector select,
.portal-shell
  .portal-sidebar
  .ops-navigation
  .ops-desktop-groups
  > button:is(:hover, [aria-expanded="true"]),
.app-shell .sidebar nav button:hover:not(.active) {
  color: var(--pudding-cocoa);
}

/* One type-size step restores the measured mobile wraps; line boxes keep
   their original computed spacing instead of scaling with the new size. */
@media (min-width: 361px) and (max-width: 760px) {
  html:lang(en) .home-v4-card[data-content-block="v4-service-products"] p,
  html:lang(en) .home-v4-card[data-content-block="v4-service-channels"] p,
  html:lang(en) .home-v4-card[data-content-block="v4-service-orders"] p {
    font-size: 11px;
    line-height: 21px;
  }

  html:lang(en) .home-v4-card[data-content-block="v4-service-orders"] h3 {
    font-size: 16px;
    line-height: 23.8px;
  }

  html:lang(en)
    .site-design-scope
    .v4-card[data-content-block="v4-service-compliance"]
    h2,
  html:lang(en)
    .v4-main
    > .v4-card-grid
    .v4-card
    a[href*="/journal/international-trademark-territories"]
    h2 {
    font-size: 22px;
    line-height: 32.2px;
  }

  html:lang(en)
    .v4-main
    > .v4-card-grid
    .v4-card
    a[href*="/journal/international-trademark-territories"]
    p {
    font-size: 13px;
    line-height: 25.9px;
  }

  html:lang(en)
    .site-design-scope
    .v4-capability-card:is(
      [data-content-block="capability-tax"],
      [data-content-block="capability-company"]
    )
    h3 {
    font-size: 20px;
    line-height: 30.4px;
  }

  html:lang(en) .site-design-scope [data-content-block="filing-tax"] > div > p {
    font-size: 17px;
    line-height: 28px;
  }

  /* 21px is the existing .v4-card h2 scale in v4.css. */
  html:lang(en)
    .v4-main
    > .v4-card-grid
    .v4-card
    a:is(
      [href*="/journal/uk-packaging-epr-business-role"],
      [href*="/journal/uk-vat-registration-documents"]
    )
    h2,
  html:lang(en)
    .site-design-scope
    [data-content-block="v4-service-orders"]
    ~ .v4-deliverables
    article:last-child
    h2 {
    font-size: 21px;
    line-height: 32.2px;
  }

  html:lang(zh-Hant)
    .site-design-scope
    .v4-card[data-content-block="filing-epr"]
    h2,
  html:lang(zh-Hans)
    .site-design-scope
    .v4-card[data-content-block="filing-epr"]
    h2 {
    font-size: 24px;
    line-height: 32.2px;
  }
}

/* Keep the native file chooser's original system metrics and upload bounds. */
.portal-shell .studio-upload > input[type="file"] {
  font-family: system-ui, sans-serif;
}

@media (max-width: 600px) {
  html:lang(en)
    dialog.portal-dialog
    form.portal-form:has(select[name="service_scope"])
    > .btn.gold {
    font-size: 15.8px;
    line-height: 24px;
  }
}

@media (min-width: 361px) and (max-width: 640px) {
  html:lang(en) .auth-brand .login-story .auth-brand-copy > p {
    font-size: 10px;
    line-height: 18.7px;
  }

  html:lang(en) .analytics-pricing-page .pricing-intro h1 {
    font-size: 35px;
    line-height: 40.32px;
  }

  html:lang(en)
    .market-hub-card:has(.market-hub-card-link[href*="analytics_goal=market"])
    > p {
    font-size: 13px;
    line-height: 25.9px;
  }
}

@media (min-width: 761px) {
  /* Use the existing 32px public heading scale (v4-filing-promo h2).
     The line-height clamp retains corporate.css's original 1.4 line box. */
  html:lang(en)
    .site-design-scope
    .v4-card[data-content-block="v4-service-compliance"]
    h2 {
    font-size: clamp(23px, 2.8vw, 32px);
    line-height: clamp(32.2px, 3.92vw, 51.8px);
  }
}

/* Resolved SVG labels share the cream dashboard surface. */
.app-shell .hero .route-map text {
  fill: var(--pudding-cocoa);
}

/* Browser placeholder paint and count text retain their existing opacity. */
input::placeholder,
textarea::placeholder {
  color: var(--pudding-taupe);
}
html:lang(en) .pricing-plan-copy li > span {
  font-size: 12px;
}
.cr-collection-tabs button span {
  color: var(--pudding-cocoa);
}

/* Only measured text changes step to the adjacent existing type grade.
   Explicit line boxes preserve the original rendered spacing. */
@media (min-width: 361px) and (max-width: 760px) {
  html:is(:lang(zh-Hant), :lang(zh-Hans))
    .v4-main
    > .v4-card-grid
    .v4-card:has(a[href*="/journal/"])
    h2 {
    font-size: 22px;
    line-height: 32.2px;
  }
}

@media (min-width: 361px) and (max-width: 640px) {
  .customer-records .cr-dossier-head h2 {
    font-size: 22px;
    line-height: 28.35px;
  }
  html:lang(en) .ops-overview-workspaces a[href*="tab=trade"] p {
    font-size: 9.5px;
    line-height: 17px;
  }
  html:lang(en) .portal-footer > span:first-child {
    font-size: 11px;
    line-height: 17px;
  }
  html:lang(en) [data-procurement-hub] .intel-nav button:first-child {
    font-size: 15px;
    line-height: 22px;
  }
  html:lang(en) .portal-case-list p {
    font-size: 15px;
    line-height: 25.2px;
  }
  html:lang(en)
    .cr-overview
    .cr-panel:has(.cr-profile-summary, .cr-profile-form)
    .cr-panel-head
    h3 {
    font-size: 15px;
    line-height: 22.4px;
  }
  html:lang(en) .portal-shell .design-safety-note,
  html:lang(en) .portal-shell .visual-editor-note,
  html:lang(en)
    [data-procurement-hub]
    .intel-panel:has(> .intel-form.inline input[type="number"])
    > p,
  html:lang(en) .supplier-dialog .supplier-price-editor > p.supplier-muted {
    font-size: 15px;
    line-height: 28.8px;
  }
  html:lang(en) .hunter-acquisition > .hunter-card:first-child > .hunter-muted {
    font-size: 13px;
    line-height: 21.6px;
  }
  html:lang(en)
    .hunter-company-layout
    > .hunter-card:last-child
    > .hunter-empty {
    font-size: 15px;
    line-height: 28.8px;
  }
  .hunter-hub .hunter-evidence button.hunter-text-button {
    font-size: 11px;
    line-height: 19.2px;
  }
  html:lang(en) .v4-settings > .v4-disclosure:last-of-type > summary {
    font-size: 17px;
    line-height: 22px;
  }
  html:lang(en)
    .cr-business:has(
      > .cr-collection-tabs > button:nth-child(5)[aria-pressed="true"]
    )
    .cr-record-card
    h3 {
    font-size: 14.25px;
    line-height: 22.4px;
  }
  html:is(:lang(zh-Hant), :lang(zh-Hans))
    .cr-business:has(
      > .cr-collection-tabs > button:nth-child(8)[aria-pressed="true"]
    )
    .cr-record-card
    h3 {
    font-size: 13px;
    line-height: 22.4px;
  }
  .portal-shell .account-action-target {
    font-size: 15px;
    line-height: 28.8px;
  }
}

@media (min-width: 851px) {
  .portal-shell .portal-account small {
    font-size: 13px;
    line-height: 19px;
  }
}

@media (min-width: 761px) {
  html:lang(en) .home-v4-card[data-content-block="v4-service-markets"] p {
    font-size: 13px;
    line-height: 24.5px;
  }
  html:lang(en)
    .v4-main
    > .v4-card-grid
    .v4-card
    a[href*="/journal/international-trademark-territories"]
    h2,
  html:lang(en)
    .site-design-scope
    [data-content-block="v4-service-products"]
    ~ .v4-deliverables
    article:last-child
    h2,
  html:lang(en)
    .site-design-scope
    [data-content-block="v4-service-markets"]
    ~ .v4-deliverables
    article:first-child
    h2,
  html:lang(en)
    .site-design-scope
    [data-content-block="v4-service-channels"]
    ~ .v4-deliverables
    article:is(:first-child, :last-child)
    h2,
  html:lang(en)
    .site-design-scope
    [data-content-block="v4-service-compliance"]
    ~ .v4-deliverables
    h2 {
    font-size: clamp(23px, 2.8vw, 32px);
    line-height: clamp(32.2px, 3.92vw, 51.8px);
  }
  html:lang(en)
    .market-hub-article
    h2:has(
      a:is(
        [href*="/journal/ce-assessment-by-product"],
        [href*="/journal/international-trademark-territories"]
      )
    ) {
    font-size: 19px;
    line-height: 29px;
  }
  html:lang(en)
    .site-design-scope
    [data-content-block="v4-service-compliance"]
    h1 {
    font-size: clamp(36px, 4.1vw, 52px);
    line-height: clamp(43.92px, 5.002vw, 73.2px);
  }
  html:lang(en)
    .auth-brand
    .auth-options
    button:first-child[aria-pressed="true"] {
    font-size: 17px;
    line-height: 24px;
  }
  html:lang(en) .development-hero h1 {
    font-size: 28px;
    line-height: 36.45px;
  }
  html:lang(en) .portal-case-list .case-country-code {
    line-height: 25px;
  }
  html:is(:lang(zh-Hant), :lang(zh-Hans), :lang(ja))
    .portal-case-list
    .case-country-code {
    line-height: 30px;
  }
  html:is(:lang(zh-Hant), :lang(zh-Hans), :lang(ja))
    .hunter-hub
    .hunter-evidence
    button.hunter-text-button {
    font-size: 11px;
    line-height: 19.2px;
  }
}

/* Restore the observed mobile line counts within one type-size grade. These
   numeric line heights retain the existing computed line boxes. */
@media (min-width: 361px) and (max-width: 760px) {
  html:lang(en) .site-design-scope .market-advisory .market-source {
    font-size: 10px;
    line-height: 18.7px;
  }

  html:lang(en)
    .site-design-scope
    .v4-main:has(.v4-hero[data-content-block="v4-service-products"])
    > .v4-next-service {
    font-size: 16px;
    line-height: 23px;
  }

  html:lang(en) .portal-shell .service-detail > .portal-empty {
    font-size: 15px;
    line-height: 22px;
  }

  html:lang(ja)
    .portal-shell
    .supplier-overview
    > .supplier-list-heading
    > small {
    font-size: 12px;
    line-height: 22.1px;
  }

  html:lang(zh-Hant) .portal-shell .studio-settings .content-translations-note,
  html:lang(zh-Hans) .portal-shell .studio-settings .content-translations-note {
    font-size: 11.25px;
    line-height: 17.6px;
  }
}

/* Keep the existing Japanese map caption clear of the native controls. */
@media (max-width: 600px) {
  /* Keep the existing attribution visible above the destination buttons. */
  .portal-shell .trade-globe.light-globe .maplibregl-ctrl-bottom-right {
    z-index: 4;
  }

  html:lang(ja)
    .portal-shell
    .trade-globe.light-globe
    .globe-mode-info
    > span:nth-of-type(2) {
    font-size: 9px;
  }
}

/* Preserve the observed request-checklist line boxes with a font-only step. */
html:lang(en)
  .portal-shell
  .v4-request-detail
  > section:first-of-type
  > ul
  > li {
  font-size: 15.25px;
}

@media (min-width: 361px) and (max-width: 760px) {
  html:lang(en) .supplier-dialog .supplier-tag-editor > small.supplier-muted {
    font-size: 13.1px;
  }
  html:is(:lang(zh-Hant), :lang(zh-Hans))
    .hunter-hub
    .hunter-evidence
    tbody
    tr
    > td:last-child {
    font-size: 11px;
  }
}

@media (min-width: 851px) {
  html:is(:lang(en), :lang(ja)) .portal-shell .portal-account small {
    font-size: 12px;
  }
}

/* Measured field-width drivers. Zero-specificity context preserves the
   component font rules' original cascade weight. Only font size changes. */
@media (min-width: 651px) {
  :where(html:is(:lang(zh-Hant), :lang(zh-Hans), :lang(ja)) .supplier-toolbar)
    .supplier-tag-filter
    > select {
    font-size: 11.7px;
  }
}

@media (min-width: 761px) {
  :where(html:lang(en)) .operations-trade-customer > a {
    font-size: 12.8px;
  }
}

:where(
    html:lang(en)
      [data-procurement-hub]
      form.intel-form.inline:has(> .intel-field > input[maxlength="100"])
  )
  > button.btn {
  font-size: 15.45px;
}

:where(
    html:lang(en)
      [data-procurement-hub]
      section.intel-panel
      > div.intel-form.inline:has(> .intel-field > select)
  )
  > button.btn {
  font-size: 15.7px;
}

@media (min-width: 851px) {
  :where(html:lang(en) .account-manager-filters) > button.btn {
    font-size: 15.8px;
  }
  :where(
      html:lang(en)
        .case-panel
        form.upload-row:has(> input[type="file"][name="file"])
    )
    > button.btn {
    font-size: 15.6px;
  }
}