/*
 * about-page.css (2026-10-09): About page (about-test.html).
 * Sits on top of styles1.css. Colours follow the home page and taxon.css.
 */

.ab {
    display: block;
    color: rgb(214, 216, 218);
    line-height: 1.6;
    padding-bottom: 2em;
}
.ab p { margin: 0 0 0.9em; max-width: 46em; }
.ab a:link, .ab a:visited { color: rgb(142, 213, 182); font-weight: 600; }
.ab a:hover { text-decoration: underline; }
.ab a:focus-visible, .ab button:focus-visible, .ab-map path:focus-visible { outline: 2px solid rgb(142, 213, 182); outline-offset: 2px; }

/* intro */
.ab-intro { padding: 0.6em 0 1.4em; border-bottom: 1px solid rgb(110, 114, 118); }
.ab-intro h1 { margin: 0.2em 0 0.35em; font-size: 2em; font-weight: 600; color: #fff; line-height: 1.2; }
.ab-lede { font-size: 1.12em; color: rgb(225, 228, 230); }

/* contents */
.ab-toc { display: flex; flex-wrap: wrap; gap: 0.4em 1.6em; margin: 1em 0 0; padding: 0; list-style: none; font-size: 0.95em; }

/* sections */
.ab-section { padding-top: 2.4em; scroll-margin-top: 1em; }
.ab-head { display: flex; align-items: baseline; gap: 0.5em; padding-bottom: 0.45em; margin-bottom: 1em; border-bottom: 1px solid rgb(110, 114, 118); }
.ab-head h2 { margin: 0; font-size: 1.45em; font-weight: 600; color: #fff; }
.ab-anchor {
    display: inline-flex; align-items: center; gap: 0.3em;
    margin-left: auto; padding: 0.15em 0.55em;
    font: inherit; font-size: 0.82em; color: rgb(170, 174, 177);
    background: none; border: 1px solid rgb(90, 94, 98); border-radius: 3px; cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.ab-anchor:hover { background: rgb(64, 68, 72); color: #fff; }
.ab-anchor svg { width: 1em; height: 1em; }
.ab h3 { margin: 1.6em 0 0.5em; font-size: 1.1em; font-weight: 600; color: #fff; }
.ab-muted { color: rgb(170, 174, 177); }

/* the three aims */
.ab-aims { list-style: none; counter-reset: aim; margin: 0 0 1.2em; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.ab-aims li { counter-increment: aim; padding: 1em 1.1em 0.4em; background: rgb(50, 53, 56); border: 1px solid rgb(90, 94, 98); border-radius: 3px; }
.ab-aims li::before { content: counter(aim); display: block; font-size: 1.6em; font-weight: 650; color: rgb(142, 213, 182); line-height: 1.2; margin-bottom: 0.2em; }
.ab-aims b { display: block; color: #fff; font-weight: 600; margin-bottom: 0.3em; }
.ab-aims p { font-size: 0.95em; }

/* notice, same family as .rw-note in taxon.css */
.ab-note { margin: 0 0 1.4em; padding: 0.8em 1em; border-left: 3px solid #f0b45a; background: rgba(240, 180, 90, 0.08); max-width: 52em; }
.ab-note p { margin: 0 0 0.5em; }
.ab-note p:last-child { margin-bottom: 0; }
.ab-note b { color: #fff; }

/* map + country panel */
.ab-mapwrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(16em, 1fr); gap: 1.4em; margin: 0.4em 0 1.6em; align-items: start; }
.ab-mapbox { background: rgb(36, 38, 41); border: 1px solid rgb(90, 94, 98); border-radius: 3px; overflow: hidden; }
.ab-map { display: block; width: 100%; height: auto; }
.ab-map path { stroke: rgb(36, 38, 41); stroke-width: 0.7; stroke-linejoin: round; }
.ab-map .ctx { fill: rgb(66, 70, 74); }
.ab-map .nc { fill: rgba(142, 213, 182, 0.55); cursor: pointer; transition: fill 0.15s ease; }
.ab-map .nc:hover, .ab-map .nc.hov { fill: rgba(142, 213, 182, 0.8); }
.ab-map .nc.sel { fill: rgb(142, 213, 182); }
.ab-map .ns { fill: url(#ab-hatch); stroke: rgb(140, 145, 150); stroke-width: 0.8; cursor: pointer; }
.ab-map .ns:hover, .ab-map .ns.hov { stroke: #fff; }
.ab-map .ns.sel { stroke: #fff; stroke-width: 1.4; }
.ab-map path:focus { outline: none; }
.ab-map text { font-size: 15px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: rgba(30, 32, 35, 0.75); stroke-width: 3px; pointer-events: none; }
.ab-map text.dim { fill: rgb(200, 204, 207); font-weight: 500; font-size: 13px; }
.ab-legend { display: flex; flex-wrap: wrap; gap: 0.3em 1.4em; padding: 0.6em 0.9em; font-size: 0.85em; color: rgb(190, 194, 197); border-top: 1px solid rgb(90, 94, 98); }
.ab-legend span { display: inline-flex; align-items: center; gap: 0.45em; }
.ab-sw { display: inline-block; width: 1.1em; height: 0.8em; border-radius: 2px; }
.ab-sw.nc { background: rgba(142, 213, 182, 0.7); }
.ab-sw.ns { background: repeating-linear-gradient(45deg, rgb(66, 70, 74) 0 2px, rgb(110, 114, 118) 2px 4px); border: 1px solid rgb(140, 145, 150); }
.ab-sw.ctx { background: rgb(66, 70, 74); }

.ab-countries { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 1em; }
.ab-countries button {
    font: inherit; font-size: 0.9em; padding: 0.3em 0.8em; cursor: pointer;
    color: rgb(214, 216, 218); background: rgb(50, 53, 56); border: 1px solid rgb(90, 94, 98); border-radius: 3px;
    transition: background-color 0.2s ease;
}
.ab-countries button:hover { background: rgb(64, 68, 72); color: #fff; }
.ab-countries button[aria-pressed="true"] { background: rgb(142, 213, 182); border-color: rgb(142, 213, 182); color: rgb(30, 32, 35); font-weight: 600; }
.ab-panel { padding: 1em 1.1em; background: rgb(50, 53, 56); border: 1px solid rgb(90, 94, 98); border-radius: 3px; min-height: 14em; }
.ab-panel h3 { margin: 0 0 0.15em; }
.ab-panel .ab-status { display: inline-block; margin-bottom: 0.7em; font-size: 0.85em; color: rgb(142, 213, 182); }
.ab-panel .ab-status.ns { color: rgb(190, 194, 197); }
.ab-panel dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35em 1em; font-size: 0.95em; }
.ab-panel dt { color: rgb(170, 174, 177); }
.ab-panel dd { margin: 0; }
.ab-panel p { font-size: 0.95em; }

/* flags explained */
.ab-flags { list-style: none; margin: 0 0 1em; padding: 0; }
.ab-flags li { display: flex; gap: 0.6em; align-items: baseline; margin-bottom: 0.4em; max-width: 46em; }
.ab-dot { flex: 0 0 auto; width: 0.7em; height: 0.7em; border-radius: 50%; transform: translateY(-0.05em); }
.ab-dot.no { background: #f0b45a; }
.ab-dot.ne { background: #e3a0c4; }
.ab-dot.un { background: #9db4e0; }

/* ethics list */
.ab-rules { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2em 2em; max-width: 64em; }
.ab-rules li { padding: 0.7em 0; border-bottom: 1px solid rgb(80, 84, 88); }
.ab-rules b { display: block; color: #fff; font-weight: 600; }
.ab-rules span { color: rgb(200, 204, 207); font-size: 0.95em; }

/* credits */
.ab-credits { display: grid; grid-template-columns: minmax(0, 1fr) 14em; gap: 2em; align-items: center; }
.ab-credits img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid rgb(90, 94, 98); }

@media only screen and (max-width: 1000px) {
    .ab-mapwrap { grid-template-columns: minmax(0, 1fr); }
    .ab-panel { min-height: 0; }
}
@media only screen and (max-width: 800px) {
    .ab-aims { grid-template-columns: minmax(0, 1fr); }
    .ab-rules { grid-template-columns: minmax(0, 1fr); }
    .ab-credits { grid-template-columns: minmax(0, 1fr); }
    .ab-credits img { width: 10em; }
}
@media only screen and (max-width: 600px) {
    .ab-intro h1 { font-size: 1.6em; }
    .ab-head { flex-wrap: wrap; }
    .ab-anchor .ab-anchor-txt { display: none; }
    .ab-map text { font-size: 19px; }
    .ab-map text.dim { font-size: 16px; }
}