/* Usage page and organisation pages. */
.ux-page { max-width: 960px; margin: 0 auto; padding: 0 1rem 3rem; }
.ux-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 2rem 0 1.5rem; }
.ux-hero h1 { font-size: 1.75rem; margin: 0 0 .4rem; }
.ux-hero p { margin: 0; color: var(--muted, #5a6a85); }
.ux-section-title { font-size: 1.1rem; font-weight: 600; margin: 2rem 0 .75rem; }
.ux-section-note { margin: -.4rem 0 1rem; color: var(--muted, #5a6a85); font-size: .9rem; }
.ux-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.ux-card { background: var(--card, #fff); border: 1px solid var(--border, #d9d9d9); border-radius: 10px; padding: 1rem 1.25rem; }
.ux-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #5a6a85); margin-bottom: .25rem; }
.ux-stat-value { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ux-stat-value--small { font-size: 1.1rem; }
.ux-grid { display: grid; gap: 1rem; }
.ux-allowance-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: .6rem; }
.ux-allowance-name { font-weight: 600; }
.ux-meta { font-size: .85rem; color: var(--muted, #5a6a85); }
.ux-meter { height: 8px; background: var(--border, #d9d9d9); border-radius: 4px; overflow: hidden; margin-bottom: .4rem; }
.ux-meter-fill { height: 100%; background: var(--accent, #0066cc); border-radius: 4px; }
.ux-meter-fill--full { background: #b45309; }
.ux-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--accent, #0066cc); background: var(--accent, #0066cc); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.ux-btn:hover { background: var(--accent-2, #004999); }
.ux-btn--quiet { background: transparent; color: var(--accent, #0066cc); }
.ux-btn--quiet:hover { background: var(--panel-soft, #f2f7ff); }
.ux-btn--danger { border-color: #b91c1c; background: transparent; color: #b91c1c; }
.ux-btn:disabled { opacity: .5; cursor: default; }
.ux-btn-sm { padding: .25rem .6rem; font-size: .85rem; font-weight: 500; }
.ux-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ux-table th, .ux-table td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--border, #d9d9d9); vertical-align: middle; }
.ux-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #5a6a85); font-weight: 600; }
.ux-table td.num, .ux-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ux-table-wrap { overflow-x: auto; }
.ux-badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--panel-soft, #f2f7ff); color: var(--brand, #003366); }
.ux-badge--held { background: #fef3c7; color: #92400e; }
.ux-badge--released { background: #e5e7eb; color: #374151; }
.ux-pager { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; margin-top: .75rem; font-size: .85rem; }
.ux-choice { display: grid; gap: .5rem; }
.ux-choice label { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid var(--border, #d9d9d9); border-radius: 8px; cursor: pointer; }
.ux-choice label:has(input:checked) { border-color: var(--accent, #0066cc); background: var(--panel-soft, #f2f7ff); }
.ux-form-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.ux-field { display: grid; gap: .25rem; font-size: .85rem; }
.ux-field input, .ux-field select { font: inherit; padding: .45rem .6rem; border: 1px solid var(--border, #d9d9d9); border-radius: 6px; background: var(--panel, #fff); color: inherit; min-width: 0; }
.ux-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border, #d9d9d9); margin: 1rem 0 1.25rem; overflow-x: auto; }
.ux-tab { padding: .6rem 1rem; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; color: var(--muted, #5a6a85); cursor: pointer; white-space: nowrap; }
.ux-tab[aria-selected="true"] { color: var(--brand, #003366); border-bottom-color: var(--accent, #0066cc); font-weight: 600; }
.ux-message { padding: .75rem 1rem; border-radius: 8px; margin: 1rem 0; background: var(--panel-soft, #f2f7ff); }
.ux-message--error { background: #fef2f2; color: #991b1b; }
.ux-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; word-break: break-all; background: var(--panel-soft, #f2f7ff); padding: .15rem .35rem; border-radius: 4px; }
.ux-empty { color: var(--muted, #5a6a85); padding: .5rem 0; }
.is-hidden { display: none !important; }
@media (max-width: 640px) {
  .ux-hero { padding-top: 1.25rem; }
  .ux-table th:nth-child(n+4), .ux-table td:nth-child(n+4) { display: none; }
}
.ux-message--warn { background: #fffbeb; color: #92400e; }