/* Task 04: shared controls and nearby feedback. Page composition remains page-owned. */
:root {
    --ui-control-brand: #102d43;
    --ui-control-text: #202c36;
    --ui-control-muted: #596875;
    --ui-control-action: #087570;
    --ui-control-action-strong: #055c58;
    --ui-control-tint: #e8f3f0;
    --ui-control-surface: #ffffff;
    --ui-control-divider: #dce3e5;
    --ui-control-boundary: #7b8a91;
    --ui-control-error: #b42318;
    --ui-control-error-tint: #fdece9;
    --ui-control-radius: 8px;
}

.ui-control-panel, .ui-sort-control, .ui-tab-list {
    color: var(--ui-control-text);
    font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
}

.ui-control-label {
    display: block;
    margin-bottom: 8px;
    color: var(--ui-control-text);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.375rem;
}

.ui-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--ui-control-radius);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ui-button--primary { background: var(--ui-control-action); border-color: var(--ui-control-action); color: #fff; }
.ui-button--primary:hover { background: var(--ui-control-action-strong); border-color: var(--ui-control-action-strong); }
.ui-button--secondary { background: var(--ui-control-surface); border-color: var(--ui-control-boundary); color: var(--ui-control-action); }
.ui-button--secondary:hover { background: var(--ui-control-tint); border-color: var(--ui-control-action); color: var(--ui-control-action-strong); }

.ui-text-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--ui-control-boundary);
    border-radius: var(--ui-control-radius);
    background: var(--ui-control-surface);
    color: var(--ui-control-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

.ui-search-control { display: block; width: 100%; }
.ui-search-control__row { width: 100%; }
.ui-search-control__row { display: flex; align-items: stretch; gap: 8px; }
.ui-search-control__row .ui-button { flex: 0 0 auto; }
.ui-region-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.ui-choice-control {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--ui-control-boundary);
    border-radius: var(--ui-control-radius);
    background: var(--ui-control-surface);
    color: var(--ui-control-text);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.375rem;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    box-shadow: none;
}

.ui-choice-control:hover { border-color: var(--ui-control-action); color: var(--ui-control-action-strong); }
.ui-choice-control.active, .ui-choice-control[aria-current='page'], .ui-choice-control[aria-pressed='true'] {
    border-color: var(--ui-control-action);
    background: var(--ui-control-tint);
    color: var(--ui-control-action-strong);
    box-shadow: inset 0 -3px 0 var(--ui-control-action);
}
.ui-choice-control[aria-current='page']::before, .ui-choice-control[aria-pressed='true']::before { content: '\2713'; font-weight: 700; }

.ui-sort-control {
    width: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px;
    border: 1px solid var(--ui-control-divider);
    border-radius: var(--ui-control-radius);
    background: var(--ui-control-surface);
    box-shadow: 0 4px 16px rgba(16,45,67,.08);
}
.ui-sort-control__label { margin: 0 0 0 8px; }
.ui-sort-control__options { display: flex; flex-wrap: wrap; gap: 8px; }

.ui-tab-list {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ui-control-divider);
    border-radius: 0;
    background: var(--ui-control-surface);
    box-shadow: none;
}
.ui-tab {
    position: relative;
    min-height: 44px;
    padding: 9px 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ui-control-muted);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.375rem;
    cursor: pointer;
}
.ui-tab:hover { color: var(--ui-control-action-strong); }
.ui-tab.active, .ui-tab[aria-pressed='true'] { background: transparent; color: var(--ui-control-action-strong); box-shadow: inset 0 -3px 0 var(--ui-control-action); }
.ui-tab[aria-pressed='true']::before { content: '\2713'; margin-right: 6px; }

.ui-button:focus-visible, .ui-text-input:focus-visible, .ui-choice-control:focus-visible, .ui-tab:focus-visible { outline: 2px solid var(--ui-control-action); outline-offset: 2px; }
:where(.ui-button, .ui-text-input, .ui-choice-control, .ui-tab):disabled,
:where(.ui-button, .ui-text-input, .ui-choice-control, .ui-tab)[aria-disabled='true'] {
    border-color: var(--ui-control-divider);
    background: #eef1f2;
    color: var(--ui-control-muted);
    cursor: not-allowed;
    opacity: .72;
}
.ui-text-input[aria-invalid='true'], .ui-text-input:invalid:not(:placeholder-shown) { border-color: var(--ui-control-error); background: var(--ui-control-error-tint); }
.empty-state { color: var(--ui-control-muted); border-color: var(--ui-control-divider); border-radius: var(--ui-control-radius); }

@media (max-width: 639px) {
    .ui-search-control__row { flex-wrap: wrap; }
    .ui-search-control__row .ui-button { width: 100%; }
    .ui-region-controls { justify-content: flex-start; }
    .ui-sort-control { width: 100%; }
    .ui-sort-control__label { width: 100%; margin-left: 0; }
    .ui-sort-control__options { width: 100%; }
    .ui-sort-control__options .ui-choice-control { flex: 1 1 auto; }
    .ui-tab-list { justify-content: flex-start; gap-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-button, .ui-text-input, .ui-choice-control, .ui-tab { transition-duration: .01ms !important; }
}