/* Shared profession page (v2/member/professions/professionPage). Theme tokens only, so every
   profession page looks the same apart from its banner and content. */

.pp {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    color: var(--byw-text);
}

.pp-card {
    background-color: var(--byw-surface-2);
    border: 1px solid var(--byw-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    min-width: 0;
}

.pp p,
.pp li {
    font-size: 0.95rem;
    line-height: 1.55;
}

.pp p {
    margin: 0 0 0.75rem;
}

.pp-card p:last-child {
    margin-bottom: 0;
}

.pp-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--byw-text);
    margin: 0 0 0.75rem;
}

.pp-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--byw-text-muted);
    margin: 0 0 0.6rem;
}

.pp-muted {
    color: var(--byw-text-muted);
}

.pp-small {
    font-size: 0.85rem;
}

.pp-dim {
    color: var(--byw-text-dim);
}

/* Header on the profession's own background art.

   The art fills its whole 1500x918 frame -- lettering along the top, characters along the
   bottom -- so any crop loses something. The header keeps the image's own proportions up to 460px
   tall and shows all of it (::after), slightly widened; the narrow width left on either side is
   filled by a blurred, darkened copy of the same image (::before), so there are no bars. */

.pp-hero {
    position: relative;
    isolation: isolate;
    aspect-ratio: 1500 / 918;
    max-height: 460px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--byw-border);
    overflow: hidden;
    margin-bottom: 1.25rem;
    background-color: var(--byw-bg);
}

.pp-hero::before,
.pp-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    background-image: var(--pp-art);
    background-repeat: no-repeat;
    background-position: center;
}

.pp-hero::before {
    inset: -40px;
    background-size: cover;
    filter: blur(28px) brightness(0.45);
}

.pp-hero::after {
    inset: 0;
    /* Halfway between showing the art at its own width and stretching it edge to edge: the art is
       as wide as the average of the two, so the blurred sides are half their natural width and the
       stretch is slight. Its own width is the header height x 1500/918, which is the whole header
       below 751.6px wide and 751.6px once the height caps at 460px -- hence min(50%, 375.8px) as
       half of it. (Adrian, 2026-09-19: full stretch was too much, full blur sides too wide.) */
    background-size: calc(50% + min(50%, 375.8px)) 100%;
}

/* A light scrim behind the words only, so the art stays bright everywhere else. */
.pp-hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1.5rem;
    background: radial-gradient(ellipse 38% 34% at center, rgba(13, 15, 20, 0.72) 0%, rgba(13, 15, 20, 0.45) 55%, rgba(13, 15, 20, 0) 100%);
}

.pp-hero .pp-title,
.pp .pp-hero .pp-tagline {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

.pp .pp-hero .pp-tagline {
    color: var(--byw-text);
}

/* On a phone the header is only ~220px tall; the tagline would cover the art. */
@media (max-width: 575.98px) {
    .pp .pp-hero .pp-tagline {
        display: none;
    }
}

.pp-hero-text {
    text-align: center;
    max-width: 40rem;
}

.pp-flag {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--byw-border);
    background-color: var(--byw-surface-2);
    font-size: 0.8rem;
    font-weight: 600;
}

.pp-flag-on {
    border-color: var(--byw-accent);
    color: var(--byw-text);
}

.pp-columns-wide {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 1.25rem;
    margin-bottom: 0;
}

.pp-columns-wide > .pp-card {
    margin-bottom: 1.25rem;
}

.pp-step {
    color: var(--byw-text-muted);
    font-weight: 600;
    font-size: 1rem;
}

.pp-meter {
    margin-bottom: 0.6rem;
}

.pp-meter-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.pp-meter-count {
    margin-left: auto;
    color: var(--byw-text-muted);
    font-variant-numeric: tabular-nums;
}

.pp-meter-count.pp-met {
    color: var(--byw-success);
}

.pp-meter-track {
    height: 0.45rem;
    border-radius: 999px;
    background-color: var(--byw-surface);
    overflow: hidden;
}

.pp-meter-fill {
    height: 100%;
    border-radius: 999px;
    background-color: var(--byw-accent);
}

.pp-meter-fill.pp-met {
    background-color: var(--byw-success);
}

/* About */

.pp-title {
    display: block;
    float: none;
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    color: var(--byw-text);
}

.pp .pp-tagline {
    font-size: 1.1rem;
    color: var(--byw-text-muted);
    margin: 0.15rem 0 0;
}

.pp-hero .pp-title {
    font-size: clamp(2rem, 5vw, 2.75rem);
}

.pp-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.5rem 2rem;
    margin-bottom: 1rem;
}

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

.pp-note {
    border-left: 3px solid var(--byw-gold);
    padding: 0.5rem 0.75rem;
    background-color: var(--byw-surface-3);
    border-radius: 0 6px 6px 0;
}

.pp-links,
.pp-list {
    margin: 0;
    padding-left: 1.1rem;
}

.pp-links {
    list-style: none;
    padding-left: 0;
}

.pp-links li,
.pp-list li {
    margin-bottom: 0.45rem;
}

.pp-links a {
    font-weight: 600;
    color: var(--byw-accent-text);
    margin-right: 0.25rem;
}

.pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.pp-chips li {
    background-color: var(--byw-surface-3);
    border: 1px solid var(--byw-border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
}

.pp .pp-subhead {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--byw-text);
    margin: 0.75rem 0 0.4rem;
}

.pp-chip-count {
    margin-left: 0.35rem;
    color: var(--byw-text-muted);
    font-variant-numeric: tabular-nums;
}

.pp-wiki {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--byw-accent-text);
    text-decoration: none;
}

.pp-wiki:hover,
.pp-wiki:focus {
    text-decoration: underline;
}

.pp-wiki-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 1rem;
}

/* Levels */

.pp-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.25rem;
}

.pp-tier {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background-color: var(--byw-surface-3);
    border: 1px solid var(--byw-border);
    border-top: 3px solid var(--byw-accent);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}

.pp-tier-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

.pp .pp-tiers li {
    margin: 0;
    line-height: 1.35;
}

@media (min-width: 1200px) {
    .pp-tiers {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.pp-tier-levels {
    font-size: 0.85rem;
    color: var(--byw-text);
}

.pp-tier-detail {
    font-size: 0.8rem;
    color: var(--byw-text-muted);
}

.pp .table.pp-levels {
    --bs-table-bg: transparent;
    --bs-table-color: var(--byw-text);
    border-color: var(--byw-border);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.pp-levels thead th {
    color: var(--byw-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    vertical-align: bottom;
}

.pp-levels thead img {
    margin-right: 0.25rem;
    vertical-align: -4px;
}

.pp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pp-levels td.pp-main {
    color: var(--byw-gold);
    font-weight: 600;
}

.pp .pp-levels-toggle {
    border-color: var(--byw-border);
    color: var(--byw-text);
}

.pp .pp-levels-toggle:hover,
.pp .pp-levels-toggle:focus {
    background-color: var(--byw-surface-3);
    color: var(--byw-text);
}

.pp-levels .pp-extra {
    display: none;
}

.pp-levels.pp-levels-all .pp-extra {
    display: table-row;
}

.pp .table.pp-levels tr.pp-current > * {
    --bs-table-bg: rgba(108, 99, 255, 0.16);
}

.pp-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background-color: var(--byw-accent-hover);
    color: #fff;
    vertical-align: 1px;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .pp-hero,
    .pp-columns,
    .pp-columns-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Research: the tasks a level asks for */

.pp-research-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.pp-research-head .pp-section-title {
    margin: 0;
}

.pp .pp-research-select {
    width: auto;
    min-width: 12rem;
    background-color: var(--byw-surface-3);
    border-color: var(--byw-border);
    color: var(--byw-text);
}

.pp-research-status {
    font-size: 0.85rem;
    color: var(--byw-text-muted);
}

.pp .pp-research-summary {
    margin-bottom: 0.75rem;
}

.pp-research-done {
    color: var(--byw-success);
    font-weight: 600;
}

.pp-tasks {
    list-style: none;
    counter-reset: pp-task;
    margin: 0 0 1rem;
    padding: 0;
}

.pp .pp-task {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 5rem;
    align-items: center;
    gap: 0.25rem 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--byw-border);
    border-radius: 8px;
    background-color: var(--byw-surface-3);
    margin-bottom: 0.4rem;
}

.pp-task-done {
    border-left: 3px solid var(--byw-success);
}

.pp-task-kind {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--byw-text-muted);
}

.pp-task-note {
    display: block;
    font-size: 0.8rem;
    color: var(--byw-warning);
}

.pp-task-count {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.pp-task-count.pp-met {
    color: var(--byw-success);
    font-weight: 600;
}

.pp-task-bar {
    grid-column: 2 / 4;
    display: block;
    margin-top: 0.1rem;
}

@media (max-width: 575.98px) {
    .pp .pp-task {
        grid-template-columns: minmax(0, 1fr) 4.5rem;
    }

    .pp-task-kind {
        grid-column: 1 / 3;
    }

    .pp-task-bar {
        grid-column: 1 / 3;
    }
}

/* Practice: the services a doctor, pharmacist or lawyer processes for other players, and the
   cook's and farmer's tools. Driven by profession-practice.js. */

.pp-practice-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
}

.pp-practice-nav a {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--byw-border);
    border-radius: 999px;
    background-color: var(--byw-surface-3);
    color: var(--byw-text);
    font-size: 0.85rem;
    text-decoration: none;
}

.pp-practice-nav a:hover,
.pp-practice-nav a:focus {
    border-color: var(--byw-accent);
}

.pp-service {
    border-top: 1px solid var(--byw-border);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    scroll-margin-top: 5rem;
}

.pp-practice > .pp-service:first-of-type,
.pp-practice-nav + .pp-service {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.pp-service-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.75rem;
}

.pp-service-head > div:first-child {
    flex: 1 1 28rem;
    min-width: 0;
}

.pp .pp-service-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--byw-text);
    margin: 0 0 0.35rem;
}

.pp-held {
    display: inline-block;
    margin: 0 0 0.4rem;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--byw-border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--byw-text-muted);
}

.pp-held-some {
    border-color: var(--byw-success);
    color: var(--byw-success);
}

.pp-service-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
}

.pp-lookup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0.5rem 0 1rem;
}

.pp-lookup .pp-section-title {
    margin: 0;
}

.pp-lookup .form-control {
    flex: 1 1 16rem;
    width: auto;
    max-width: 28rem;
}

.pp .form-control,
.pp .form-select {
    background-color: var(--byw-surface-3);
    border-color: var(--byw-border);
    color: var(--byw-text);
}

.pp .form-control[readonly] {
    color: var(--byw-text-muted);
}

/* DataTables, Bootstrap 5 build, on the dark theme */

.pp .table.pp-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--byw-text);
    --bs-table-hover-bg: var(--byw-surface-3);
    border-color: var(--byw-border);
    font-size: 0.9rem;
    width: 100% !important;
}

.pp .pp-table thead th {
    color: var(--byw-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pp .pp-table tbody tr.selected > * {
    --bs-table-bg: rgba(108, 99, 255, 0.22);
    box-shadow: inset 0 0 0 9999px rgba(108, 99, 255, 0.22);
    color: var(--byw-text);
}

.pp .pp-table[data-selectable] tbody tr,
.pp .pp-table[data-row-opens] tbody tr {
    cursor: pointer;
}

.pp .dataTables_wrapper .dataTables_length,
.pp .dataTables_wrapper .dataTables_filter,
.pp .dataTables_wrapper .dataTables_info {
    color: var(--byw-text-muted);
    font-size: 0.85rem;
}

.pp .dataTables_wrapper .form-select,
.pp .dataTables_wrapper .form-control {
    background-color: var(--byw-surface-3);
    border-color: var(--byw-border);
    color: var(--byw-text);
}

.pp .dataTables_wrapper .pagination {
    --bs-pagination-bg: var(--byw-surface-3);
    --bs-pagination-color: var(--byw-text);
    --bs-pagination-border-color: var(--byw-border);
    --bs-pagination-hover-bg: var(--byw-surface);
    --bs-pagination-hover-color: var(--byw-text);
    --bs-pagination-active-bg: var(--byw-accent-hover);
    --bs-pagination-active-border-color: var(--byw-accent-hover);
    --bs-pagination-disabled-bg: var(--byw-surface-2);
    --bs-pagination-disabled-color: var(--byw-text-dim);
    --bs-pagination-disabled-border-color: var(--byw-border);
    margin: 0;
}

/* Dialogs */

.pp-dialog .modal-content {
    background-color: var(--byw-surface-2);
    border: 1px solid var(--byw-border);
    color: var(--byw-text);
}

.pp-dialog .modal-header,
.pp-dialog .modal-footer {
    border-color: var(--byw-border);
}

.pp-dialog .modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.pp-form-grid {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem 1rem;
}

.pp-form-grid .form-label {
    margin: 0;
    color: var(--byw-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.pp-form-grid .form-text {
    color: var(--byw-text-muted);
    margin: 0.25rem 0 0;
}

.pp-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.pp .pp-lookup-lede {
    margin-bottom: 1rem;
}

.pp .pp-lookup-message {
    padding: 0.75rem 1rem;
    border: 1px solid var(--byw-border);
    border-left: 3px solid var(--byw-danger);
    border-radius: 0 6px 6px 0;
    background-color: var(--byw-surface-3);
    margin: 0;
}

.pp .pp-lookup-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.pp-facts {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0;
}

.pp-facts dt {
    color: var(--byw-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.pp-facts dd {
    margin: 0;
}

@media (max-width: 575.98px) {
    .pp-form-grid,
    .pp-facts {
        grid-template-columns: minmax(0, 1fr);
    }
}