/**
 * PokeSaga UI primitives (Phase 0)
 * Use var(--ps-*) tokens only. Scope box-sizing to .ps-* / aliases — never globally.
 */

/* --------------------------------------------------------------------------
   Box-sizing: only under design-system classes (content-box site layout intact)
   -------------------------------------------------------------------------- */
.ps-card,
.ps-btn,
.btn,
.ps-table,
.table,
.ps-pill,
.ps-alert,
.ps-form,
.ps-field,
.ps-input,
.ps-select,
.ps-textarea,
.ps-form__actions,
.ps-grid,
.ps-tile,
.ps-empty,
.ps-tabs,
.ps-tab,
.ps-filterbar,
.ps-media,
.ps-embed,
.ps-hero,
.ps-progress,
.ps-pagination,
.ps-section,
.ps-contributors,
.ps-contributor,
.ps-footer,
.ps-nav {
  box-sizing: border-box;
}

.ps-card *,
.ps-card *::before,
.ps-card *::after,
.ps-btn *,
.ps-btn *::before,
.ps-btn *::after,
.btn *,
.btn *::before,
.btn *::after,
.ps-table *,
.ps-table *::before,
.ps-table *::after,
.table *,
.table *::before,
.table *::after,
.ps-form *,
.ps-form *::before,
.ps-form *::after,
.ps-grid *,
.ps-grid *::before,
.ps-grid *::after,
.ps-tile *,
.ps-tile *::before,
.ps-tile *::after,
.ps-empty *,
.ps-empty *::before,
.ps-empty *::after,
.ps-tabs *,
.ps-tabs *::before,
.ps-tabs *::after,
.ps-filterbar *,
.ps-filterbar *::before,
.ps-filterbar *::after,
.ps-media *,
.ps-media *::before,
.ps-media *::after,
.ps-hero *,
.ps-hero *::before,
.ps-hero *::after,
.ps-progress *,
.ps-progress *::before,
.ps-progress *::after,
.ps-pagination *,
.ps-pagination *::before,
.ps-pagination *::after,
.ps-section *,
.ps-section *::before,
.ps-section *::after,
.ps-alert *,
.ps-alert *::before,
.ps-alert *::after,
.ps-contributors *,
.ps-contributors *::before,
.ps-contributors *::after,
.ps-footer *,
.ps-footer *::before,
.ps-footer *::after,
.ps-nav *,
.ps-nav *::before,
.ps-nav *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.ps-card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow);
  margin-bottom: var(--ps-space-5);
  overflow: hidden;
  color: var(--ps-body);
  font-family: var(--ps-font-body);
}

.ps-card__header {
  background: var(--ps-card-header);
  color: var(--ps-text-on-dark);
  font-family: var(--ps-font-heading);
  font-size: 1.35em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  padding: var(--ps-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ps-card__body {
  padding: var(--ps-space-4);
}

/* --------------------------------------------------------------------------
   Buttons (.ps-btn + Bootstrap aliases)
   -------------------------------------------------------------------------- */
.ps-btn,
.btn {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--ps-font-body);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  color: var(--ps-text-on-dark);
  background: var(--ps-card-header);
  border: 1px solid transparent;
  border-radius: var(--ps-radius-sm);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ps-btn:hover,
.btn:hover {
  background: var(--ps-card-header-hover);
  color: var(--ps-text-on-dark);
  text-decoration: none;
}

.ps-btn:disabled,
.btn:disabled,
.ps-btn.is-disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ps-btn--primary,
.btn-primary {
  background: var(--ps-primary);
  color: var(--ps-text-on-dark);
}

.ps-btn--primary:hover,
.btn-primary:hover {
  background: var(--ps-primary-hover);
  color: var(--ps-text-on-dark);
}

.ps-btn--success,
.btn-success {
  background: var(--ps-success);
  color: var(--ps-text-on-dark);
}

.ps-btn--success:hover,
.btn-success:hover {
  background: var(--ps-success-hover);
  color: var(--ps-text-on-dark);
}

.ps-btn--danger,
.btn-danger {
  background: var(--ps-danger);
  color: var(--ps-text-on-dark);
}

.ps-btn--danger:hover,
.btn-danger:hover {
  background: #9e3924;
  color: var(--ps-text-on-dark);
}

.ps-btn--ghost {
  background: transparent;
  color: var(--ps-ink);
  border-color: var(--ps-border);
}

.ps-btn--ghost:hover {
  background: var(--ps-sunken);
  color: var(--ps-ink);
}

.btn-warning {
  background: var(--ps-gold);
  color: var(--ps-ink);
}

.btn-warning:hover {
  background: #c99400;
  color: var(--ps-ink);
}

.btn-info {
  background: var(--ps-primary);
  color: var(--ps-text-on-dark);
}

.btn-info:hover {
  background: var(--ps-primary-hover);
  color: var(--ps-text-on-dark);
}

.btn-secondary {
  background: var(--ps-card-header);
  color: var(--ps-text-on-dark);
}

.btn-secondary:hover {
  background: var(--ps-card-header-hover);
  color: var(--ps-text-on-dark);
}

.ps-btn--sm,
.btn-sm,
.btn-xs {
  padding: 4px 10px;
  font-size: 11px;
}

.ps-btn--block,
.btn-block {
  display: block;
  width: 100%;
}

.ps-btn--paypal {
  background: #0070ba;
  color: var(--ps-text-on-dark);
}

.ps-btn--paypal:hover {
  background: #005ea6;
  color: var(--ps-text-on-dark);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.ps-table,
.table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin: var(--ps-space-3) 0 var(--ps-space-5) 0;
  font-family: var(--ps-font-body);
  font-size: 13px;
}

.content .ps-table,
.content .table {
  max-width: 650px;
}

.ps-table th,
.ps-table td,
.table th,
.table td {
  padding: 8px 10px;
  text-align: left;
  border-top: 1px solid var(--ps-surface);
}

.ps-table th,
.table th,
.ps-table tr.yellow td,
.table tr.yellow td {
  background: var(--ps-card-header);
  color: var(--ps-text-on-dark);
  font-weight: bold;
}

.ps-table td,
.table td {
  background: var(--ps-sunken);
  color: var(--ps-ink);
}

.ps-table--striped tbody tr:nth-child(even) td,
.table-striped tbody tr:nth-child(even) td {
  background: #ecece4;
}

.ps-table--hover tbody tr:hover td,
.table-hover tbody tr:hover td {
  background: #ddd9cf;
}

.ps-table--clickable tbody tr {
  cursor: pointer;
}

.ps-table__rank {
  width: 2.5em;
  text-align: center;
  font-weight: bold;
}

.ps-table__rank--1 {
  color: #d4af37;
}

.ps-table__rank--2 {
  color: #a8a8a8;
}

.ps-table__rank--3 {
  color: #cd7f32;
}

.ps-table .ps-num,
.table .ps-num {
  text-align: right;
}

.ps-table .ps-name,
.table .ps-name {
  font-weight: bold;
}

/* Online / offline labels (myaccount character list, etc.) */
.status_online {
  color: var(--ps-success);
  font-weight: bold;
}

.status_offline {
  color: var(--ps-text-muted);
}

.status_progress {
  color: var(--ps-gold);
  font-weight: bold;
}

/* Narrow sidebar tables */
#sidebar_container .ps-table,
#sidebar_container .table,
#sidebar_container table {
  width: 100%;
  max-width: 100%;
  font-size: 11px;
  margin: var(--ps-space-2) 0;
}

#sidebar_container .ps-table th,
#sidebar_container .ps-table td,
#sidebar_container .table th,
#sidebar_container .table td,
#sidebar_container table th,
#sidebar_container table td {
  padding: 5px 6px;
}

/* --------------------------------------------------------------------------
   Pills / status badges
   -------------------------------------------------------------------------- */
.ps-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--ps-radius-pill);
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1.4;
  background: var(--ps-text-muted);
  color: var(--ps-text-on-dark);
}

.ps-pill--live {
  background: var(--ps-danger);
  color: var(--ps-text-on-dark);
}

.ps-pill--open {
  background: #3f7d3f;
  color: var(--ps-text-on-dark);
}

.ps-pill--idle {
  background: #9a958c;
  color: var(--ps-text-on-dark);
}

.ps-pill--online {
  background: var(--ps-success);
  color: var(--ps-text-on-dark);
}

.ps-pill--offline {
  background: var(--ps-danger);
  color: var(--ps-text-on-dark);
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.ps-alert {
  margin: var(--ps-space-3) 0;
  padding: 10px 14px;
  background: var(--ps-sunken);
  border: 1px solid var(--ps-border);
  border-left: 4px solid var(--ps-card-header);
  border-radius: var(--ps-radius-sm);
  color: var(--ps-ink);
  font-size: 13px;
}

.ps-alert ul {
  margin: 0;
  padding-left: 1.2em;
}

.ps-alert p {
  margin: 0 0 var(--ps-space-2) 0;
}

.ps-alert p:last-child {
  margin-bottom: 0;
}

.ps-alert--error {
  border-left-color: var(--ps-danger);
  background: #f8ebe8;
}

.ps-alert--success {
  border-left-color: var(--ps-success);
  background: #eaf6eb;
}

.ps-alert--info {
  border-left-color: var(--ps-primary);
  background: #e6f6f9;
}

.ps-alert--warn {
  border-left-color: var(--ps-gold);
  background: #fff8e6;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.ps-form {
  margin: var(--ps-space-4) 0;
  font-family: var(--ps-font-body);
}

.ps-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: var(--ps-space-3);
}

.ps-field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b665f;
  font-weight: bold;
}

.ps-input,
.ps-select,
.ps-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 6px 10px;
  font: 100% var(--ps-font-body);
  color: var(--ps-ink);
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
}

.ps-input:focus,
.ps-select:focus,
.ps-textarea:focus {
  outline: none;
  border-color: var(--ps-primary);
  box-shadow: 0 0 0 2px rgba(0, 159, 188, 0.2);
}

.ps-textarea {
  min-height: 90px;
  resize: vertical;
}

.ps-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-2);
  margin-top: var(--ps-space-4);
  align-items: center;
}

.ps-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-2);
  align-items: flex-end;
}

.ps-form__row .ps-field {
  flex: 1 1 140px;
  margin-bottom: 0;
  min-width: 0;
}

.ps-form__row .ps-form__actions {
  margin-top: 0;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */
.ps-grid {
  display: grid;
  gap: var(--ps-space-4);
  margin: var(--ps-space-4) 0;
}

.ps-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ps-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ps-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   Stat tile
   -------------------------------------------------------------------------- */
.ps-tile {
  background: var(--ps-sunken);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  padding: var(--ps-space-3) var(--ps-space-4);
  box-shadow: var(--ps-shadow-soft);
}

.ps-tile__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ps-text-muted);
  font-weight: bold;
  margin-bottom: var(--ps-space-1);
}

.ps-tile__value {
  display: block;
  font-family: var(--ps-font-heading);
  font-size: 1.6em;
  color: var(--ps-ink);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.ps-empty {
  margin: var(--ps-space-3) 0 var(--ps-space-5) 0;
  padding: 26px 22px;
  background: var(--ps-sunken);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  color: var(--ps-ink);
  text-align: center;
}

.ps-empty h2,
.ps-empty h3 {
  margin: 0 0 var(--ps-space-2) 0;
  padding: 0;
  color: var(--ps-ink);
  font-family: var(--ps-font-heading);
}

.ps-empty p {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--ps-body);
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.ps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--ps-space-4) 0 0 0;
}

.ps-tab {
  display: inline-block;
  padding: 8px 16px;
  background: var(--ps-sunken);
  color: var(--ps-ink);
  text-decoration: none;
  border: 1px solid #cfcfc4;
  border-bottom: none;
  border-radius: var(--ps-radius-sm) var(--ps-radius-sm) 0 0;
  font-weight: bold;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  line-height: inherit;
}

.ps-tab:hover {
  background: #efefe7;
  color: var(--ps-ink);
  text-decoration: none;
}

.ps-tab.active,
.ps-tab--active {
  background: var(--ps-card-header);
  color: var(--ps-text-on-dark);
  border-color: var(--ps-card-header);
}

/* Dense wrap TOC — keep inside a .ps-card; do not combine with sticky on tall TOCs */
.ps-tabs--wrap {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 var(--ps-space-3) 0;
}

.ps-tabs--wrap .ps-tab {
  border-bottom: 1px solid #cfcfc4;
  border-radius: var(--ps-radius-sm);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: normal;
}

.ps-tabs--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ps-surface);
  padding-top: var(--ps-space-2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Prefer .ps-toc__heading outside the flex row — flex:100% labels break tall TOCs */
.ps-tabs__label {
  flex: 0 0 100%;
  font-family: var(--ps-font-heading);
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ps-ink);
  margin: var(--ps-space-2) 0 var(--ps-space-1) 0;
}

.ps-progress__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--ps-body);
  margin-bottom: 2px;
}

.ps-progress--complete .ps-progress__bar {
  background: var(--ps-success);
}

.ps-card__body > p {
  margin: 0 0 var(--ps-space-3) 0;
  line-height: 1.55;
}

.ps-card__body > p:last-child {
  margin-bottom: 0;
}

.ps-card__body ul {
  margin: 0 0 var(--ps-space-3) 0;
  padding-left: 1.25em;
  line-height: 1.55;
}

.ps-card__body li {
  margin-bottom: var(--ps-space-1);
}

/* AAC contributor avatars (credits.php) */
.ps-contributors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-2);
  margin: var(--ps-space-3) 0;
  padding: var(--ps-space-3);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  background: var(--ps-sunken);
}

.ps-contributor {
  width: 88px;
  padding: var(--ps-space-2);
  text-align: center;
}

.ps-contributor a {
  color: var(--ps-ink);
  text-decoration: none;
  font-size: 11px;
}

.ps-contributor a:hover {
  color: var(--ps-primary);
  text-decoration: none;
}

.ps-contributor img {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ps-space-1) auto;
  border-radius: var(--ps-radius-sm);
  border: 1px solid var(--ps-border);
  background: var(--ps-surface);
}

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.ps-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: var(--ps-space-3);
  background: var(--ps-sunken);
  border: 1px solid #cfcfc4;
  border-radius: var(--ps-radius);
  margin: 0 0 var(--ps-space-4) 0;
}

.ps-filterbar .ps-field {
  margin-bottom: 0;
}

.ps-filterbar .ps-select,
.ps-filterbar .ps-input {
  min-width: 118px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Media figure
   -------------------------------------------------------------------------- */
.ps-media {
  margin: var(--ps-space-4) 0;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  overflow: hidden;
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-soft);
}

.ps-media img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ps-media--center {
  text-align: center;
}

.ps-media--center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ps-media--logo {
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0 0 var(--ps-space-4) 0;
}

.ps-media--logo img {
  max-width: 320px;
}

.ps-media--thumb {
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0;
  max-width: 100px;
}

.ps-media--thumb img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* User submitted screenshots: cap the height so a phone-sized upload cannot
   stretch the fixed 1000px shell. */
.ps-media--screenshot img {
  max-height: 420px;
  width: auto;
  object-fit: contain;
}

.ps-media figcaption,
.ps-media__caption {
  padding: var(--ps-space-2) var(--ps-space-3);
  font-size: 12px;
  color: var(--ps-body);
  background: var(--ps-sunken);
  border-top: 1px solid var(--ps-border);
}

/* --------------------------------------------------------------------------
   Video embed (16:9 responsive iframe)
   -------------------------------------------------------------------------- */
/* Fixed 16:9 box rather than a percentage-padding trick: padding-top resolves
   against the container width, which would mis-size the frame once max-width
   kicks in inside the 1000px shell. */
.ps-embed {
  position: relative;
  width: 640px;
  max-width: 100%;
  height: 360px;
  margin: var(--ps-space-4) auto;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--ps-shadow-soft);
}

.ps-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Split (logo + content side-by-side; table layout for content-box shell)
   -------------------------------------------------------------------------- */
.ps-split {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.ps-split__aside {
  display: table-cell;
  width: 110px;
  vertical-align: top;
  padding-right: var(--ps-space-4);
}

.ps-split__main {
  display: table-cell;
  vertical-align: top;
}

.ps-split__main > p:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ps-hero {
  background: var(--ps-sunken);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  padding: var(--ps-space-6);
  margin-bottom: var(--ps-space-5);
  box-shadow: var(--ps-shadow-soft);
}

.ps-hero--centered {
  text-align: center;
}

.ps-hero--centered .ps-hero__lead,
.ps-hero--centered > p {
  margin-left: auto;
  margin-right: auto;
}

.ps-hero--centered .ps-hero__actions {
  justify-content: center;
}

.ps-hero__title,
.ps-hero h1 {
  font-family: var(--ps-font-heading);
  font-size: 2.2em;
  font-weight: normal;
  color: var(--ps-ink);
  margin: 0 0 var(--ps-space-2) 0;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ps-hero__lead,
.ps-hero p {
  margin: 0;
  padding: 0;
  color: var(--ps-body);
  line-height: 1.6;
  max-width: 40em;
}

.ps-hero__actions {
  margin-top: var(--ps-space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-2);
}

/* Jump-to TOC — use block + inline-block (not flex) so wrapped rows always
   reserve height; flex TOCs were overlapping following headings under style.css. */
.ps-toc {
  clear: both;
}

.ps-toc__group {
  display: block;
  clear: both;
  margin: 0 0 var(--ps-space-4) 0;
  overflow: hidden;
}

.ps-toc__group:last-child {
  margin-bottom: 0;
}

.ps-toc__heading {
  display: block;
  font-family: var(--ps-font-heading);
  font-size: 1.15em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ps-ink);
  margin: 0 0 var(--ps-space-2) 0;
  padding: 0;
  position: static;
  float: none;
}

.ps-toc__links {
  display: block;
  line-height: 1.2;
  overflow: hidden;
}

.ps-toc__link {
  display: inline-block;
  float: none !important;
  position: static !important;
  vertical-align: top;
  margin: 0 6px 8px 0;
  padding: 6px 10px;
  background: var(--ps-sunken);
  color: var(--ps-ink);
  text-decoration: none;
  border: 1px solid #cfcfc4;
  border-radius: var(--ps-radius-sm);
  font-size: 11px;
  font-weight: normal;
  line-height: 1.3;
  box-sizing: border-box;
}

.ps-toc__link:hover {
  background: #efefe7;
  color: var(--ps-ink);
  text-decoration: none;
}

.ps-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  color: var(--ps-ink);
  line-height: 1.45;
}

.ps-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  flex-shrink: 0;
  cursor: pointer;
}

.ps-lang-panel {
  display: none;
}

.ps-lang-panel.is-active {
  display: block;
}

.ps-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ps-inline-actions form {
  display: inline;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */
.ps-progress {
  width: 100%;
  height: 12px;
  background: var(--ps-sunken);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-pill);
  overflow: hidden;
  margin: var(--ps-space-2) 0;
}

.ps-progress__bar {
  display: block;
  height: 100%;
  background: var(--ps-primary);
  border-radius: var(--ps-radius-pill);
  min-width: 0;
  transition: width 0.2s ease;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.ps-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-space-1);
  align-items: center;
  margin: var(--ps-space-4) 0;
  font-size: 13px;
}

.ps-pagination a,
.ps-pagination span {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  background: var(--ps-surface);
  color: var(--ps-ink);
  text-decoration: none;
}

.ps-pagination a:hover {
  background: var(--ps-sunken);
  text-decoration: none;
}

.ps-pagination .active,
.ps-pagination .current {
  background: var(--ps-card-header);
  border-color: var(--ps-card-header);
  color: var(--ps-text-on-dark);
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */
.ps-section {
  margin: 0 0 var(--ps-space-5) 0;
}

.ps-section__title {
  font-family: var(--ps-font-heading);
  font-size: 1.8em;
  font-weight: normal;
  color: var(--ps-ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 var(--ps-space-3) 0;
  padding: 0 0 var(--ps-space-2) 0;
  border-bottom: 1px solid var(--ps-border);
}

/* Utility: hide without inline style (JS may toggle) */
.ps-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Sidebar → card language (preserve float / content-box widths)
   Higher specificity so these win over style.css loaded after this file.
   -------------------------------------------------------------------------- */
#sidebar_container .sidebar {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-lg);
  box-shadow: var(--ps-shadow);
  /* Keep legacy horizontal padding so outer float width stays stable */
  padding: 0 15px 8px 13px;
  overflow: hidden;
}

#sidebar_container .sidebar > h2,
#sidebar_container .sidebar > h3 {
  background: var(--ps-card-header);
  color: var(--ps-text-on-dark);
  font: normal 190% var(--ps-font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: none;
  margin: 0 -15px 10px -13px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

#sidebar_container .sidebar > h2 a,
#sidebar_container .sidebar > h3 a {
  color: var(--ps-text-on-dark);
  text-decoration: none;
}

#sidebar_container .sidebar > h2 a:hover,
#sidebar_container .sidebar > h3 a:hover {
  color: var(--ps-primary-on-dark);
}

/* Nested headings inside widgets stay body-style */
#sidebar_container .sidebar .inner h3,
#sidebar_container .sidebar ul h3 {
  background: none;
  color: var(--ps-primary);
  font: normal 140% var(--ps-font-heading);
  text-transform: none;
  letter-spacing: 0;
  margin: 8px 0 4px;
  padding: 0;
  border: none;
  text-shadow: none;
}

#sidebar_container .ps-form {
  margin: var(--ps-space-2) 0;
}

#sidebar_container .ps-form__actions {
  margin-top: var(--ps-space-2);
}

#sidebar_container .ps-tile {
  margin: 0 0 var(--ps-space-2) 0;
  padding: var(--ps-space-2) var(--ps-space-3);
}

#sidebar_container .ps-tile__value {
  font-size: 1.35em;
}

#sidebar_container .ps-empty {
  margin: var(--ps-space-2) 0;
  padding: var(--ps-space-3);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Main nav (.ps-nav) — sits under the logo, matches card-header / footer chrome
   Higher specificity so these win over SooperFish theming in style.css.
   -------------------------------------------------------------------------- */
html body header {
  height: auto;
  background: var(--ps-card-header);
  border-bottom: 0;
  position: relative;
  z-index: 40;
}

header .ps-nav {
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--ps-card-header);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

header .ps-nav__inner,
header .ps-nav #menu_container {
  width: 1000px;
  margin: 0 auto;
}

header .ps-nav ul.sf-menu,
header .ps-nav ul#nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

header .ps-nav ul.sf-menu > li,
header .ps-nav ul#nav > li {
  display: block;
  float: none;
  flex: 1 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  text-align: center;
  position: relative;
}

header .ps-nav ul#nav > li > a {
  display: block;
  padding: 12px 8px;
  margin: 0;
  font-family: var(--ps-font-heading);
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: none;
  text-decoration: none;
  color: var(--ps-text-on-dark);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

header .ps-nav ul#nav > li > a:hover,
header .ps-nav ul#nav > li > a:focus,
header .ps-nav ul#nav > li.hover > a,
header .ps-nav ul#nav > li.sfHover > a,
header .ps-nav ul#nav > li:hover > a {
  color: var(--ps-primary-on-dark);
  background: var(--ps-card-header-hover);
  text-decoration: none;
}

header .ps-nav ul#nav > li.active > a,
header .ps-nav ul#nav > li.active > a:hover,
header .ps-nav ul#nav > li.active > a:focus {
  color: var(--ps-primary-on-dark);
  border-bottom-color: var(--ps-primary-on-dark);
  background: transparent;
}

header .ps-nav ul#nav > li.active:hover > a {
  background: var(--ps-card-header-hover);
}

header .ps-nav ul#nav > li:has(> ul) > a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: 1px;
}

header .ps-nav ul#nav ul {
  top: 100%;
  left: 0;
  z-index: 50;
  width: 200px;
  overflow: hidden;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-top: 0;
  border-radius: 0 0 var(--ps-radius) var(--ps-radius);
  box-shadow: var(--ps-shadow);
  margin: 0;
  padding: var(--ps-space-2) 0;
  text-align: left;
}

header .ps-nav ul#nav > li:has(> ul) > ul {
  left: auto !important;
  right: 0;
}

header .ps-nav ul#nav ul li {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  text-align: left;
}

/* Community (6 items): two columns. SooperFish used to set inline widths that
   overflowed border-box and wrapped back to a single column — CSS owns this now. */
header .ps-nav ul#nav ul.ps-nav__dropdown--2col {
  width: 340px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

header .ps-nav ul#nav ul.ps-nav__dropdown--2col > li {
  float: none;
  width: auto;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

header .ps-nav ul#nav ul a {
  padding: 8px 16px;
  margin: 0;
  font-family: var(--ps-font-heading);
  font-size: 1.2em;
  font-weight: normal;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: none;
  color: var(--ps-ink);
  white-space: nowrap;
  border-bottom: 0;
}

header .ps-nav ul#nav ul a:hover,
header .ps-nav ul#nav ul a:focus,
header .ps-nav ul#nav ul li.active > a,
header .ps-nav ul#nav ul li.active > a:hover {
  color: var(--ps-primary);
  background: var(--ps-sunken);
  text-decoration: none;
}

header .ps-nav span.sf-arrow {
  display: none;
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
footer.ps-footer {
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: var(--ps-space-5) 0 var(--ps-space-4);
  text-align: left;
  background: var(--ps-card-header) url(../images/footer.png) repeat-x;
  color: #A8AA94;
  font-family: var(--ps-font-body);
  font-size: 90%;
}

.ps-footer__inner {
  width: 1000px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.ps-footer__col {
  display: table-cell;
  width: 33.33%;
  vertical-align: top;
  padding: 0 var(--ps-space-4);
  box-sizing: border-box;
}

.ps-footer__title {
  margin: 0 0 var(--ps-space-2) 0;
  padding: 0;
  font-family: var(--ps-font-heading);
  font-size: 1.5em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ps-text-on-dark);
}

.ps-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-footer__list li {
  margin: 0 0 var(--ps-space-1) 0;
  padding: 0;
  background: none;
  line-height: 1.5em;
}

.ps-footer__list a,
.ps-footer a {
  color: #A8AA94;
  text-decoration: none;
}

.ps-footer__list a:hover,
.ps-footer a:hover {
  color: var(--ps-text-on-dark);
  text-decoration: none;
}

.ps-footer__disclaimer {
  width: 1000px;
  margin: var(--ps-space-4) auto 0;
  padding: var(--ps-space-3) var(--ps-space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
  line-height: 1.6em;
  color: #A8AA94;
  text-align: center;
  font-size: 0.95em;
}