/* TERRA · Nicoya: styles owned by panels.js. Square corners, sand ink, gold marks, teal data. */

/* bulletin figures: each one a button that acts on the map */
.pn-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); padding-top: 12px; }
.pn-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 8px 8px 10px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); text-align: left; cursor: pointer; }
.pn-fig b { font: 300 24px/1.15 var(--serif); color: var(--sand); }
.pn-fig span { font-size: 12px; line-height: 1.4; color: var(--sand-3); }
.pn-fig:hover b { color: var(--gold); }

/* "how this is read" disclosures */
.pn-how { border-top: 1px solid var(--line); }
.pn-how > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; font-size: 13px; color: var(--sand-2); }
.pn-how > summary::-webkit-details-marker { display: none; }
.pn-how > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--gold); }
.pn-how[open] > summary::after { content: "−"; }
.pn-how > summary:hover { color: var(--gold); }
.pn-how p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--sand-3); }

.pn-howto { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.5; color: var(--sand-3); }
.pn-howto b { font-weight: 500; color: var(--sand); }

/* bar chart: tree cover lost each year */
.pn-bars { width: 100%; height: auto; display: block; overflow: visible; }
.pn-barg { cursor: pointer; outline: none; }
.pn-hit { fill: transparent; stroke: none; }
.pn-barg:focus-visible .pn-hit { stroke: var(--gold); stroke-width: 2px; }
.pn-bar { fill: rgba(198,167,106,.55); }
.pn-barg:hover .pn-bar, .pn-barg.on .pn-bar { fill: var(--gold); }
.pn-bv { font: 9.5px var(--mono); fill: var(--sand-2); text-anchor: middle; }
.pn-bx { font: 9.5px var(--mono); fill: var(--sand-3); text-anchor: middle; }

/* the place card rows: label, value, range; open for how it is read */
.pn-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pr { border-bottom: 1px solid var(--line-2); }
.pr > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: baseline; min-height: 44px; padding: 9px 18px 9px 0; cursor: pointer; list-style: none; position: relative; }
.pr > summary::-webkit-details-marker { display: none; }
.pr > summary::after { content: "+"; position: absolute; right: 0; top: 9px; font: 12px var(--mono); color: var(--gold); opacity: .7; }
.pr[open] > summary::after { content: "−"; opacity: 1; }
.pr > summary:hover .pk { color: var(--gold); }
.pk { font-size: 13px; color: var(--sand-2); }
.pv { font-size: 13.5px; color: var(--sand); text-align: right; }
.pg { grid-column: 1 / -1; font-size: 11px; line-height: 1.45; color: var(--sand-3); text-align: right; }
.pn-rank { color: var(--teal); }
.pd { padding: 0 0 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pd p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--sand-3); }
.pd p b { font-weight: 500; color: var(--sand-2); }
.pn-rows .row span:last-child { text-align: right; }

/* small tables */
.pn-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.pn-t th { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sand-3); text-align: right; padding: 6px 0 4px 8px; border-bottom: 1px solid var(--line); }
.pn-t td { padding: 6px 0 6px 8px; border-bottom: 1px solid var(--line-2); text-align: right; color: var(--sand); font-variant-numeric: tabular-nums; }
.pn-t th:first-child, .pn-t td:first-child { text-align: left; padding-left: 0; color: var(--sand-2); }
.pn-t .chip { min-height: 32px; }

/* chips used inside panels: tall enough to hit */
.pd .chip, .pn-match .chip, .pn-wp .chip, #pnBarNote .chip { min-height: 44px; padding: 0 12px; font-size: 12px; }
.chip:focus-visible, .pr > summary:focus-visible, .pn-how > summary:focus-visible, .pn-fig:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the greenness line */
.pn-green { display: flex; flex-direction: column; gap: 6px; }
.pn-gl { width: 100%; height: auto; display: block; outline: none; }
.pn-gl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pn-dry { fill: rgba(198,167,106,.09); }
.pn-grid { stroke: rgba(232,226,214,.12); stroke-width: 1; }
.pn-ax { font: 9px var(--mono); fill: var(--sand-3); text-anchor: end; }
.pn-yr { font: 9.5px var(--mono); fill: var(--sand-3); }
.pn-mo { font: 8px var(--mono); fill: rgba(232,226,214,.45); text-anchor: middle; }
.pn-line { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linejoin: round; }
.pn-pt { fill: var(--teal); }
.pn-cloud { stroke: var(--sand-3); stroke-width: 1.2; fill: none; }
.pn-gap { fill: rgba(232,226,214,.22); }
.pn-now { stroke: var(--gold); stroke-width: 1.6; }
.pn-col { fill: transparent; cursor: pointer; }
.pn-col.on { fill: rgba(232,226,214,.06); }
.pn-read { min-height: 18px; font-size: 11px; line-height: 1.5; color: var(--sand-2); }
.pn-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; color: var(--sand-3); }
.pn-key i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.pn-key .k-dry { background: rgba(198,167,106,.22); }
.pn-key .k-cloud { border: 1px solid var(--sand-3); }
.pn-key .k-gap { background: rgba(232,226,214,.22); height: 3px; vertical-align: 2px; }
.pn-key .k-now { width: 2px; background: var(--gold); }
.pn-key .k-band { background: rgba(52,178,148,.35); }
.pn-key .k-mid { width: 2px; background: var(--sand); }

/* ground like this */
.pn-results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pn-match { border-bottom: 1px solid var(--line-2); }
.pn-match > summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; }
.pn-match > summary::-webkit-details-marker { display: none; }
.pn-match > summary:hover, .pn-match[open] > summary { color: var(--gold); }
.pn-match > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pn-match .n { font-family: var(--mono); color: var(--gold); }
.pn-match .ha { font: 300 19px var(--serif); }
.pn-match small { display: block; font-size: 12px; color: var(--sand-3); }
.pn-match .pn-t { margin-bottom: 8px; }
.pn-match > .chip { margin-bottom: 12px; }

/* among its own kind */
.pn-ks { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pn-k { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pn-kh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--sand-2); }
.pn-kh b { font: 300 17px var(--serif); color: var(--sand); text-align: right; }
.pn-kh b.warn { color: var(--rust); }
.pn-kbar { position: relative; height: 14px; background: rgba(232,226,214,.08); }
.pn-kbar .band { position: absolute; top: 0; bottom: 0; background: rgba(52,178,148,.35); }
.pn-kbar .mid { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--sand); }
.pn-kbar i { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: var(--gold); }
.pn-kn { font-size: 10.5px; line-height: 1.5; color: var(--sand-3); }
.pn-cta { font-family: var(--serif) !important; font-weight: 300; font-size: 20px !important; color: var(--sand) !important; }

/* watching */
.pn-watch { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pn-wp { border-bottom: 1px solid var(--line-2); }
.pn-wp > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; }
.pn-wp > summary::-webkit-details-marker { display: none; }
.pn-wp > summary:hover, .pn-wp[open] > summary { color: var(--gold); }
.pn-wp > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pn-wp small { display: block; font-size: 12px; color: var(--sand-3); }
.pn-wp .pd { align-items: stretch; }