/* Atlassian Design System tokens are generated by npm run design:tokens. */
:root {
    font-family: var(--ds-font-family-body);
    font-size: 100%;
    color: var(--ds-text);
    background: var(--ds-surface);
    font-synthesis: none;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    font: var(--ds-font-body);
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
button,
input,
select {
    font: inherit;
}
button,
summary {
    cursor: pointer;
}
button,
input,
select {
    border-radius: var(--ds-radius-small);
}
button:disabled {
    cursor: wait;
    background: var(--ds-background-disabled);
    color: var(--ds-text-disabled);
}
a {
    color: var(--ds-link);
    text-decoration: none;
}
a:hover {
    color: var(--ds-link-pressed);
    text-decoration: underline;
}
[hidden] {
    display: none !important;
}
:focus-visible {
    outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
    outline-offset: 2px;
}
.wrap {
    width: min(800px, calc(100% - 48px));
    margin-inline: auto;
}
.site-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-200);
    padding-block: var(--ds-space-300) 0;
}
h1 {
    font: var(--ds-font-heading-large);
    margin: 0;
}
select {
    max-width: 160px;
    min-height: 32px;
    padding: var(--ds-space-050) var(--ds-space-100);
    border: 1px solid var(--ds-border-input);
    color: var(--ds-text);
    background: var(--ds-background-input);
}
.search-row {
    display: flex;
    gap: var(--ds-space-100);
}
.input-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}
input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--ds-border-input);
    background: var(--ds-background-input);
    color: var(--ds-text);
    padding: var(--ds-space-100) 40px var(--ds-space-100) var(--ds-space-150);
}
input:hover,
select:hover {
    background: var(--ds-background-input-hovered);
}
/* Keep the clear control separate from mixed-direction query text. */
[dir='rtl'] input {
    padding-left: 40px;
    padding-right: var(--ds-space-150);
}
input:focus,
select:focus {
    border-color: var(--ds-border-focused);
}
input[aria-invalid='true'] {
    border-color: var(--ds-border-danger);
}
input::placeholder {
    color: var(--ds-text-subtlest);
}
input::-webkit-search-cancel-button {
    display: none;
}
.clear-button {
    position: absolute;
    inset-inline-end: 4px;
    top: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    color: var(--ds-icon-subtle);
    background: transparent;
    font-size: 20px;
}
.clear-button:hover {
    background: var(--ds-background-neutral-hovered);
}
.primary {
    min-height: 40px;
    border: 0;
    padding: var(--ds-space-100) var(--ds-space-200);
    background: var(--ds-background-brand-bold);
    color: var(--ds-text-inverse);
    font-weight: var(--ds-font-weight-medium);
}
.primary:hover:not(:disabled) {
    background: var(--ds-background-brand-bold-hovered);
}
.primary:active:not(:disabled) {
    background: var(--ds-background-brand-bold-pressed);
}
.hint,
.status,
#resultHint {
    color: var(--ds-text-subtle);
    margin: var(--ds-space-100) 0 0;
}
.status:empty {
    margin: 0;
}
.notice {
    margin-top: var(--ds-space-200);
    padding: var(--ds-space-150);
    border-radius: var(--ds-radius-small);
    background: var(--ds-background-information);
    color: var(--ds-text);
}
.error {
    display: flex;
    align-items: center;
    gap: var(--ds-space-200);
    justify-content: space-between;
    background: var(--ds-background-danger);
}
.notice button,
.topic {
    border: 1px solid var(--ds-border);
    background: var(--ds-background-neutral-subtle);
    color: var(--ds-text);
    padding: var(--ds-space-075) var(--ds-space-150);
    min-height: 32px;
}
.notice button:hover,
.topic:hover {
    background: var(--ds-background-neutral-hovered);
}
.results-heading {
    margin-block: var(--ds-space-400) var(--ds-space-100);
}
.results-heading h2 {
    font: var(--ds-font-heading-small);
    margin: 0;
}
.service-card {
    border-bottom: 1px solid var(--ds-border);
    padding-block: var(--ds-space-250);
    overflow-wrap: anywhere;
}
.service-card h3 {
    font: var(--ds-font-heading-small);
    margin: 0 0 var(--ds-space-050);
}
.badge {
    display: inline-block;
    font: var(--ds-font-body-small);
    padding: var(--ds-space-025) var(--ds-space-050);
    margin-block: var(--ds-space-050);
    background: var(--ds-background-success);
    color: var(--ds-text-success);
    border-radius: var(--ds-radius-small);
}
.original-name,
.metadata,
.fallback {
    color: var(--ds-text-subtle);
    font: var(--ds-font-body-small);
}
.original-name {
    margin: 0;
}
.description {
    margin-block: var(--ds-space-100);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.official-link {
    display: inline-block;
    margin-block: var(--ds-space-050) var(--ds-space-100);
}
summary {
    color: var(--ds-link);
    width: fit-content;
    padding-block: var(--ds-space-050);
}
.detail-section {
    margin-top: var(--ds-space-200);
}
.detail-section h4 {
    font: var(--ds-font-heading-xsmall);
    margin: 0 0 var(--ds-space-050);
}
.detail-section p {
    margin: 0;
    white-space: pre-line;
}
.detail-section ul {
    margin: 0;
    padding-inline-start: var(--ds-space-250);
}
.detail-section li {
    margin-block: var(--ds-space-050);
    white-space: pre-line;
}
.metadata {
    margin-top: var(--ds-space-200);
}
.metadata p {
    margin-block: var(--ds-space-050);
}
.fallback {
    margin-block: var(--ds-space-050) 0;
}
.topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-100);
    margin-top: var(--ds-space-200);
}
.suggestions {
    position: absolute;
    z-index: 5;
    inset-inline: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: var(--ds-space-050) 0;
    list-style: none;
    background: var(--ds-surface-overlay);
    border-radius: var(--ds-radius-small);
    box-shadow: var(--ds-shadow-overlay);
    max-height: 300px;
    overflow-y: auto;
}
.suggestions li {
    padding: var(--ds-space-100) var(--ds-space-150);
    cursor: pointer;
    overflow-wrap: anywhere;
}
.suggestions li:hover {
    background: var(--ds-background-neutral-subtle-hovered);
}
.suggestions li[aria-selected='true'] {
    background: var(--ds-background-selected);
    color: var(--ds-text-selected);
    box-shadow: inset 2px 0 var(--ds-border-selected);
}
[dir='rtl'] .suggestions li[aria-selected='true'] {
    box-shadow: inset -2px 0 var(--ds-border-selected);
}
.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-100);
    padding-block: var(--ds-space-300);
    color: var(--ds-text-subtle);
    font: var(--ds-font-body-small);
}
.site-footer nav {
    display: flex;
    gap: var(--ds-space-200);
}
.site-footer a {
    color: var(--ds-text-subtle);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    top: -100px;
    z-index: 10;
    padding: var(--ds-space-100);
    background: var(--ds-surface);
}
.skip-link:focus {
    top: 0;
}
/* Legal pages use the same type, spacing and neutral surfaces. */
.hero,
.container {
    max-width: 800px;
    margin-inline: auto;
    padding: var(--ds-space-300);
}
.hero h1 {
    margin-top: var(--ds-space-200);
}
.container {
    padding-top: 0;
}
.container h2 {
    font: var(--ds-font-heading-medium);
    margin-top: var(--ds-space-300);
}
.container p,
.container li {
    line-height: 1.6;
}
.footer {
    padding: var(--ds-space-300);
    text-align: center;
}
.footer a {
    margin-inline: var(--ds-space-100);
}
@media (max-width: 480px) {
    .wrap {
        width: calc(100% - 32px);
    }
    .site-header {
        padding-top: var(--ds-space-300);
        gap: var(--ds-space-100);
    }
    h1 {
        font: var(--ds-font-heading-medium);
    }
    select {
        max-width: 128px;
    }
    input {
        font-size: 1rem;
    }
    .primary {
        padding-inline: var(--ds-space-150);
    }
    .error {
        align-items: start;
        flex-direction: column;
    }
}

.language-control {
    flex-shrink: 0;
}
.site-header h1 {
    min-width: 0;
}

.search-main {
    flex: 1;
    padding-top: clamp(32px, 7vh, 80px);
    padding-bottom: var(--ds-space-400);
}
#pageTitle {
    font: var(--ds-font-heading-xxlarge);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    text-align: center;
    max-width: 780px;
    margin: 0 auto var(--ds-space-400);
    text-wrap: balance;
}
.title-accent {
    color: var(--ds-text-brand);
}
#searchForm {
    width: min(100%, 680px);
    margin-inline: auto;
}
.query-section {
    width: min(100%, 680px);
    margin: var(--ds-space-300) auto 0;
    text-align: center;
}
.query-section h2 {
    font: var(--ds-font-heading-xsmall);
    color: var(--ds-text-subtle);
    margin: 0 0 var(--ds-space-150);
}
.query-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ds-space-100);
}
.query-pill {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-full);
    background: var(--ds-background-neutral-subtle);
    color: var(--ds-text);
    padding: var(--ds-space-075) var(--ds-space-150);
    min-height: 32px;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.query-pill:hover {
    background: var(--ds-background-neutral-subtle-hovered);
    border-color: var(--ds-border-brand);
}
.query-pill:active {
    background: var(--ds-background-selected);
}
.query-heading {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--ds-space-150);
}
.text-button {
    border: 0;
    background: transparent;
    color: var(--ds-link);
    padding: var(--ds-space-050);
    font: var(--ds-font-body-small);
}
.text-button:hover {
    text-decoration: underline;
}
.empty-history {
    margin: 0;
    color: var(--ds-text-subtlest);
    font: var(--ds-font-body-small);
}
.site-footer {
    margin-top: auto;
}
@media (max-width: 480px) {
    .search-main {
        padding-top: var(--ds-space-400);
    }
    #pageTitle {
        margin-bottom: var(--ds-space-300);
    }
    .query-section {
        margin-top: var(--ds-space-250);
    }
}

.suggestions ul { list-style: none; padding: 0; margin: 0; }
.dropdown-heading { display: flex; justify-content: space-between; align-items: center; padding: var(--ds-space-050) var(--ds-space-150); color: var(--ds-text-subtle); font: var(--ds-font-body-small); border-bottom: 1px solid var(--ds-border); }

.field-error { color: var(--ds-text-danger); font: var(--ds-font-body-small); margin: var(--ds-space-100) 0 0; text-align: start; }