@charset "UTF-8";
:root {
  --s: 15px;
}

.product-description {
  display: none;
}

@media (max-width: 600px) {
  .option-description {
    display: none;
  }
  .product-description {
    display: block;
  }
}
body {
  font-family: Helvetica, Arial, sans-serif;
  background: linear-gradient(to bottom, #0b3e58 90px, #136e9c 800px);
  min-height: calc(100vh - 50px);
  color: #212121;
  font-size: 0.86em;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 1024px;
}

html {
  scrollbar-color: #95d3f4 #d4dadc;
}

a {
  color: #2b2b2b;
}

ul {
  list-style: square;
}

.content-wrapper {
  position: relative;
}

.header {
  background: #0b3e58;
  padding: calc(var(--s)*2) calc(2*var(--s)*1) calc(var(--s)*1);
  display: flex;
  justify-content: space-between;
}
@media (max-width: 750px) {
  .header {
    flex-direction: column;
  }
}
.header::after {
  clear: both;
}
.header #logo {
  color: #fff;
}
.header #logo img {
  vertical-align: middle;
  padding-right: 2px;
  display: inline-block;
  margin: -10px 0;
}
.header #logo > a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}
.header #logo > .instance-title {
  padding-left: 10px;
  margin-left: 10px;
  white-space: nowrap;
}
@media (max-width: 800px) {
  .header #logo > .instance-title {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.header #logo > .instance-title::before {
  display: inline-block;
  border-left: 1px solid #fff;
}
.header #menu-link {
  text-align: left;
  margin-right: calc(var(--s)*-1);
  margin-left: calc(var(--s)*-1);
  color: #dedede;
}
.header #menu-link > ul {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}
.header #menu-link a {
  font-weight: bold;
  color: #dedede;
}
.header #menu-link .ex-menu-title, .header #menu-link a {
  cursor: pointer;
  padding: calc(var(--s)*1) calc(2*var(--s)*0.5) calc(var(--s)*1);
  display: block;
  white-space: nowrap;
  text-decoration: none;
}
.header #menu-link .ex-menu-title:hover {
  background-color: #0086a5;
}
.header #menu-link .is-open > .ex-menu-title {
  background-color: #0086a5;
}
.header #menu-link a:hover {
  color: #474747;
}
.header #menu-link ul {
  padding: 0;
  margin: 0;
}
.header #menu-link ul > li {
  list-style: none;
  position: relative;
}
.header #menu-link ul > li > ul > li {
  background: #0086a5;
}
.header #menu-link ul > li > ul > li:hover {
  background-color: #00718b;
}
.header #menu-link ul > li > ul > li:hover a {
  color: #fff;
}
.header #menu-link .ex-menu > ul {
  display: none;
}
.header #menu-link .ex-menu.is-open > ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
}
.header #menu-link .ex-menu.is-open > ul.left {
  left: initial;
  right: 0;
}
.header #menu-link .ex-menu.is-open > ul li .hide {
  display: none;
}
.header #menu-link .ex-menu.is-open > ul li #show-hidden-product {
  text-align: right;
  color: #000;
  font-size: 12px;
}

.logo-text, .instance-title {
  display: inline-block;
  padding: calc(var(--s)*1) calc(2*var(--s)*0) calc(var(--s)*1);
}

.ex-menu-title {
  cursor: pointer;
}
.ex-menu-title::after {
  content: " ▾";
  font-size: 0.8em;
}

#breadcrumb {
  background: #00718b;
  color: #efefef;
  font-weight: bold;
  padding: calc(var(--s)*1) calc(2*var(--s)*1) calc(var(--s)*1);
}
#breadcrumb .item {
  color: #efefef;
}

header {
  color: #efefef;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: #6e6e6e;
}

footer {
  padding: calc(var(--s)*1) calc(2*var(--s)*1) calc(var(--s)*1);
  text-align: right;
  color: #efefef;
  font-size: 0.7em;
  line-height: 2em;
}

#content {
  clear: right;
  position: relative;
  width: auto;
  background: #e6edef;
}

.map-panel {
  width: 100%;
}

#map {
  height: 400px;
}

@media (min-width: 800px) {
  .panels {
    display: flex;
  }
  .info-panel {
    width: 250px;
  }
  #map {
    flex: 1 1;
    height: 100%;
    width: 100%;
  }
}
.info-panel ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

h1 {
  line-height: 30px;
  font-size: 18px;
  font-weight: normal;
  color: #333;
}
h1 strong {
  display: block;
}

h4 {
  color: #4f4f4f;
}

h2.followed, h3.followed {
  display: inline-block;
}
h2.followed.lonesome, h3.followed.lonesome {
  margin-bottom: 0;
}

.header-follow {
  display: inline-block;
  margin-top: 5px;
}

ul:last-child, ol:last-child {
  margin-bottom: 0;
}

ul {
  padding-left: calc(var(--s)*2);
}
ul.quiet {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.quiet li::marker {
  color: #737373;
}

.message-box {
  position: absolute;
  left: calc(50% - 100px);
  top: 25%;
  width: 200px;
  text-align: center;
  z-index: 9999;
  background: #474747;
  padding: 13px 15px;
  color: #fff;
}
.message-box a {
  color: #167eb3;
}

h1 .header-anchor, h2 .header-anchor, h3 .header-anchor, h4 .header-anchor, th .header-anchor {
  text-decoration: none;
  font-size: 0.7em;
  opacity: 0.6;
  visibility: hidden;
}
h1:hover .header-anchor, h2:hover .header-anchor, h3:hover .header-anchor, h4:hover .header-anchor, th:hover .header-anchor {
  visibility: visible;
}

.panel {
  padding: calc(var(--s)*2) calc(2*var(--s)*1) calc(var(--s)*2);
  line-height: 1.7em;
  background: #e6edef;
}
.panel h1, .panel h2, .panel h3, .panel h4 {
  margin: calc(2 * var(--s)) 0 var(--s);
}
.panel h1:first-child, .panel h2:first-child, .panel h3:first-child, .panel h4:first-child {
  margin-top: 0;
}
.panel h1:last-child, .panel h2:last-child, .panel h3:last-child, .panel h4:last-child {
  margin-bottom: 0;
}
.panel h1.followed, .panel h2.followed, .panel h3.followed, .panel h4.followed {
  margin-right: 10px;
}
.panel p, .panel .p {
  margin: var(--s) 0;
}
.panel p:first-child, .panel .p:first-child {
  margin-top: 0;
}
.panel p:last-child, .panel .p:last-child {
  margin-bottom: 0;
}
.panel h3 {
  font-size: 1.3em;
  color: #082e41;
}
.panel.odd {
  background-color: #fafafa;
  border-bottom: 0;
}
.panel.highlight {
  background: #474747;
  color: #efefef;
  border-bottom: 0;
}
.panel.highlight > h1 {
  color: #fff;
}
.panel.highlight a {
  color: #aeaeae;
}
.panel.highlight .muted {
  color: #bcbcbc;
}
.panel.overflowable {
  overflow-x: auto;
}
@media (max-width: 750px) {
  .panel .dataset-location table tr th {
    float: left;
  }
  .panel .dataset-location table tr td {
    float: left;
  }
}

.columned {
  column-count: 2;
}
@media (max-width: 590px) {
  .columned {
    column-count: 1;
  }
}

.header-option {
  position: relative;
  border-collapse: collapse;
  vertical-align: bottom;
  background-color: #474747;
}
.header-option.limited {
  white-space: nowrap;
}
.header-option:hover {
  background-color: #545454;
}
.header-option.primary {
  background-color: #404040;
}
.header-option.primary:hover {
  background-color: #595959;
}
.header-option.is-open {
  background-color: #0086a5;
}
.header-option.is-open:hover {
  background-color: #0086a5;
}
.header-option.is-open .option-title:hover {
  color: #fff;
}
.header-option.is-open .option-menu {
  background-color: #0086a5;
  display: table;
}
.header-option .option-title {
  font-size: 1em;
  font-weight: normal;
  line-break: anywhere;
}
.header-option .group-name {
  margin: 0;
  padding: calc(var(--s)*2) calc(2*var(--s)*1) calc(var(--s)*1);
  font-size: 0.8em;
  color: #212121;
  text-transform: lowercase;
}
.header-option > .option-title {
  padding: calc(var(--s)*1) calc(2*var(--s)*1) calc(var(--s)*1);
  margin: 0;
  line-height: 1.75em;
  flex: 1 1;
  cursor: pointer;
}
.header-option > .option-title::after {
  content: " ▾";
}
.header-option ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.header-option ul li {
  margin: 0;
}
.header-option a.option-menu-link {
  display: block;
  text-decoration: none;
  padding: calc(var(--s)*1) calc(2*var(--s)*1) calc(var(--s)*1);
  color: #fcfcfc;
  font-weight: bold;
}
.header-option a.option-menu-link.active {
  background-color: #009abe;
}
.header-option a.option-menu-link:hover {
  background-color: #00afd8;
  text-decoration: underline;
  color: #fff;
}
.header-option .option-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
}
.header-option .option-menu li.empty {
  opacity: 0.6;
}
.header-option .option-menu li.empty a.option-menu-link {
  font-weight: normal;
}
.header-option .option-menu.left {
  left: initial;
  right: 0;
}
.header-option .option-menu > ul {
  display: table-row;
}
.header-option .option-menu > ul > li {
  display: table-cell;
}
.header-option .option-menu > .footer {
  padding: calc(var(--s)*1) calc(2*var(--s)*1) calc(var(--s)*1);
}
.header-option .wildcard {
  font-weight: bold;
}

/* Table of values */
table.collapsed-head th {
  text-align: left;
  font-weight: normal;
  padding-bottom: var(--s);
}

.nowrap {
  white-space: nowrap;
}

.unavailable-metadata tbody tr:nth-child(even) {
  background-color: #dde6e9;
}
.unavailable-metadata tbody tr:nth-child(odd) {
  background-color: #e9eff1;
}

.data-table {
  margin: 0 calc(-2 * var(--s)) var(--s);
}
@media (max-width: 750px) {
  .data-table .collapse-when-small {
    display: block;
    margin-top: var(--s);
  }
  .data-table .collapse-when-small td {
    display: block;
  }
}
.data-table tbody tr:hover {
  background-color: #d6e2e5;
}
.panel.highlight .data-table tbody tr:hover {
  background-color: #3d3d3d;
}
.panel.odd .data-table tbody tr:hover {
  background-color: #f0f0f0;
}
.data-table th {
  font-weight: bold;
  font-size: 0.8em;
}
.data-table tr.section-header th {
  padding-top: var(--s);
}
.data-table td, .data-table th {
  padding: 0 calc(2 * var(--s));
  text-align: left;
  vertical-align: top;
}
@media (min-width: 800px) {
  .data-table td, .data-table th {
    line-height: calc(var(--s) * 2);
  }
}
.data-table td.numeric, .data-table th.numeric {
  text-align: right;
}
.data-table td.important-column, .data-table th.important-column {
  min-width: 90px;
}

.right {
  text-align: right;
}

.numeric {
  font-variant-numeric: tabular-nums;
}

/* lists of key-values */
.query-param-list {
  width: auto;
  display: grid;
}

@media (min-width: 800px) {
  .query-param-list.wide {
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
  }
}
.query-param, .query-param-search {
  display: block;
}
.query-param > .value, .query-param-search > .value {
  color: #737373;
  word-break: break-all;
}
.query-param .missing-value, .query-param-search .missing-value {
  text-decoration-style: wavy;
  text-decoration-line: underline;
}

.query-param-search {
  width: fit-content;
  text-decoration: initial;
}
.query-param-search > .search-icon {
  visibility: hidden;
}
.query-param-search:hover > .search-icon {
  visibility: visible;
}

button {
  margin: 5px 0;
  background-color: #105e85;
  border: 0;
  color: #fff;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: bold;
  font-size: inherit;
}
button:hover {
  background-color: #105e85;
}
button.small {
  margin: 0;
  font-size: 12px;
  background-color: #474747;
}

label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  color: #333;
}
label.disabled {
  color: #ccc;
}

.form-footer {
  margin: 1em 0;
}
.form-footer > label {
  padding: 8px;
  display: block;
}
.form-footer select {
  padding: 6px;
  width: 100%;
  text-overflow: ellipsis;
}

.chart-timeline {
  padding: var(--s) calc(3 * var(--s)) var(--s) 0;
}

.chart-timeline-bars {
  font-size: 0;
  height: 50px;
  white-space: nowrap;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid #486e80;
}

.chart-timeline-bar {
  display: block;
  position: relative;
  background-color: #105e85;
}
.chart-timeline-bar.new-year {
  background-color: #0e4e6e;
}
.chart-timeline-bar:hover {
  background-color: #0b3e58;
}
.chart-timeline-bar:hover .chart-timeline-year.tooltip {
  display: block;
}

.chart-timeline-year {
  z-index: 1;
  position: absolute;
  bottom: 0;
  text-align: left;
  font-size: 10px;
  font-weight: normal;
  color: #333;
  transform: translateY(calc(100% + 5px)) rotate(45deg);
  transform-origin: top left;
}
.chart-timeline-year.tooltip {
  z-index: 100;
  font-size: 12px;
  padding: 5px 10px;
  color: #fff;
  background-color: #105e85;
  display: none;
}

.relative {
  position: relative;
}

.muted {
  color: #737373;
}

.addendum {
  font-size: 0.7em;
  font-weight: normal;
}

.badge {
  font-size: 0.7em;
  background-color: #ccc;
  white-space: nowrap;
  padding: 2px 4px;
}
.badge .fa {
  font-size: 1.1em;
}
.panel.highlight .badge {
  background: #212121;
  color: #efefef;
}
.header-follow .badge:not(:first-child) {
  margin-left: 10px;
}
.badge.header-badge {
  font-size: inherit;
}

.uri-path {
  font-family: monospace;
  font-size: 12px;
  line-break: anywhere;
}

.raw-metadata .property {
  font-family: "Courier New", monospace;
}
.raw-metadata .property .property, .raw-metadata .property .array, .raw-metadata .property .array-item {
  padding-left: var(--s);
}
.raw-metadata .property > .value {
  color: #737373;
  line-break: anywhere;
  white-space: pre-line;
}
.raw-metadata .property summary {
  font-style: italic;
  color: #737373;
}

.dataset-info {
  background-color: #fafafa;
  margin: 10px;
  padding: 15px;
}

.recenter-map {
  margin: 0;
  padding: 0;
}

details > summary {
  cursor: pointer;
}

.grid-form *, .grid-form *:before, .grid-form *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.grid-form input[type=text], .grid-form input[type=email], .grid-form input[type=number], .grid-form input[type=password], .grid-form input[type=search], .grid-form input[type=tel], .grid-form input[type=url], .grid-form input[type=color], .grid-form input[type=date], .grid-form input[type=datetime], .grid-form input[type=datetime-local], .grid-form input[type=month], .grid-form input[type=time], .grid-form input[type=week], .grid-form textarea, .grid-form select {
  font-size: 18px;
  padding: 0;
  margin: 0;
  width: 100%;
}
.grid-form input[type=text], .grid-form input[type=email], .grid-form input[type=number], .grid-form input[type=password], .grid-form input[type=search], .grid-form input[type=tel], .grid-form input[type=url], .grid-form input[type=color], .grid-form input[type=date], .grid-form input[type=datetime], .grid-form input[type=datetime-local], .grid-form input[type=month], .grid-form input[type=time], .grid-form input[type=week], .grid-form textarea {
  border: 0;
  background: transparent;
}
.grid-form input[type=text]::-webkit-input-placeholder, .grid-form input[type=email]::-webkit-input-placeholder, .grid-form input[type=number]::-webkit-input-placeholder, .grid-form input[type=password]::-webkit-input-placeholder, .grid-form input[type=search]::-webkit-input-placeholder, .grid-form input[type=tel]::-webkit-input-placeholder, .grid-form input[type=url]::-webkit-input-placeholder, .grid-form input[type=color]::-webkit-input-placeholder, .grid-form input[type=date]::-webkit-input-placeholder, .grid-form input[type=datetime]::-webkit-input-placeholder, .grid-form input[type=datetime-local]::-webkit-input-placeholder, .grid-form input[type=month]::-webkit-input-placeholder, .grid-form input[type=time]::-webkit-input-placeholder, .grid-form input[type=week]::-webkit-input-placeholder, .grid-form textarea::-webkit-input-placeholder {
  font-weight: 100;
  color: #595959;
}
.grid-form input[type=text]:-moz-placeholder, .grid-form input[type=email]:-moz-placeholder, .grid-form input[type=number]:-moz-placeholder, .grid-form input[type=password]:-moz-placeholder, .grid-form input[type=search]:-moz-placeholder, .grid-form input[type=tel]:-moz-placeholder, .grid-form input[type=url]:-moz-placeholder, .grid-form input[type=color]:-moz-placeholder, .grid-form input[type=date]:-moz-placeholder, .grid-form input[type=datetime]:-moz-placeholder, .grid-form input[type=datetime-local]:-moz-placeholder, .grid-form input[type=month]:-moz-placeholder, .grid-form input[type=time]:-moz-placeholder, .grid-form input[type=week]:-moz-placeholder, .grid-form textarea:-moz-placeholder {
  font-weight: 100;
  color: #595959;
}
.grid-form input[type=text]:focus, .grid-form input[type=email]:focus, .grid-form input[type=number]:focus, .grid-form input[type=password]:focus, .grid-form input[type=search]:focus, .grid-form input[type=tel]:focus, .grid-form input[type=url]:focus, .grid-form input[type=color]:focus, .grid-form input[type=date]:focus, .grid-form input[type=datetime]:focus, .grid-form input[type=datetime-local]:focus, .grid-form input[type=month]:focus, .grid-form input[type=time]:focus, .grid-form input[type=week]:focus, .grid-form textarea:focus {
  outline: none;
}
.grid-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.grid-form fieldset legend {
  border: none;
  border-bottom: 4px solid #404040;
  color: #404040;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  position: static;
  width: 100%;
}
.grid-form fieldset fieldset legend {
  border-bottom: 2px solid #404040;
  font-weight: normal;
}
.grid-form fieldset fieldset fieldset legend {
  border-bottom: 1px solid #404040;
  font-weight: normal;
  font-size: 15px;
}
.grid-form [data-row-span] {
  border-bottom: 1px solid #777;
  width: 100%;
  zoom: 1;
}
.grid-form [data-row-span]:before, .grid-form [data-row-span]:after {
  content: "";
  display: table;
}
.grid-form [data-row-span]:after {
  clear: both;
}
@media only screen and (min-width: 0) and (max-width: 700px) {
  .grid-form [data-row-span] {
    border-bottom: none;
  }
}
.grid-form [data-row-span] [data-field-span] {
  padding: 8px;
  float: left;
}
@media only screen and (min-width: 0) and (max-width: 700px) {
  .grid-form [data-row-span] [data-field-span] {
    border-bottom: 1px solid #777;
    width: 100% !important;
  }
}
@media only screen and (min-width: 700px) {
  .grid-form [data-row-span] [data-field-span] {
    border-right: 1px solid #777;
    display: block;
  }
}
.grid-form [data-row-span] [data-field-span] label:first-child {
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  color: #333;
  display: block;
  margin-bottom: 4px;
}
.grid-form [data-row-span] [data-field-span] label:first-child:hover {
  cursor: text;
}
.grid-form [data-row-span] [data-field-span]:last-child {
  border-right: none;
}
.grid-form [data-row-span] [data-field-span]:hover {
  background: #cfd1d3;
  cursor: text;
}
.grid-form [data-row-span] [data-field-span].focus {
  background: #c2c4c7;
}
.grid-form [data-row-span] [data-field-span].focus label {
  color: #262626;
}
@media print {
  .grid-form [data-row-span] {
    display: table;
    height: 56px;
    page-break-inside: avoid;
  }
  .grid-form [data-row-span] [data-field-span] {
    border-right: 1px solid #333333;
    display: table-cell;
    float: none;
  }
  .grid-form [data-row-span] [data-field-span].focus, .grid-form [data-row-span] [data-field-span]:hover {
    background: none;
  }
  .grid-form [data-row-span] [data-field-span] label:first-child {
    letter-spacing: 0;
  }
}
.grid-form [data-row-span="1"] > [data-field-span="1"] {
  width: 100%;
}
.grid-form [data-row-span="2"] > [data-field-span="1"] {
  width: 50%;
}
.grid-form [data-row-span="2"] > [data-field-span="2"] {
  width: 100%;
}
.grid-form [data-row-span="3"] > [data-field-span="1"] {
  width: 33.3333333333%;
}
.grid-form [data-row-span="3"] > [data-field-span="2"] {
  width: 66.6666666667%;
}
.grid-form [data-row-span="3"] > [data-field-span="3"] {
  width: 100%;
}
.grid-form [data-row-span="4"] > [data-field-span="1"] {
  width: 25%;
}
.grid-form [data-row-span="4"] > [data-field-span="2"] {
  width: 50%;
}
.grid-form [data-row-span="4"] > [data-field-span="3"] {
  width: 75%;
}
.grid-form [data-row-span="4"] > [data-field-span="4"] {
  width: 100%;
}
.grid-form [data-row-span="5"] > [data-field-span="1"] {
  width: 20%;
}
.grid-form [data-row-span="5"] > [data-field-span="2"] {
  width: 40%;
}
.grid-form [data-row-span="5"] > [data-field-span="3"] {
  width: 60%;
}
.grid-form [data-row-span="5"] > [data-field-span="4"] {
  width: 80%;
}
.grid-form [data-row-span="5"] > [data-field-span="5"] {
  width: 100%;
}
.grid-form [data-row-span="6"] > [data-field-span="1"] {
  width: 16.6666666667%;
}
.grid-form [data-row-span="6"] > [data-field-span="2"] {
  width: 33.3333333333%;
}
.grid-form [data-row-span="6"] > [data-field-span="3"] {
  width: 50%;
}
.grid-form [data-row-span="6"] > [data-field-span="4"] {
  width: 66.6666666667%;
}
.grid-form [data-row-span="6"] > [data-field-span="5"] {
  width: 83.3333333333%;
}
.grid-form [data-row-span="6"] > [data-field-span="6"] {
  width: 100%;
}
.grid-form [data-row-span="7"] > [data-field-span="1"] {
  width: 14.2857142857%;
}
.grid-form [data-row-span="7"] > [data-field-span="2"] {
  width: 28.5714285714%;
}
.grid-form [data-row-span="7"] > [data-field-span="3"] {
  width: 42.8571428571%;
}
.grid-form [data-row-span="7"] > [data-field-span="4"] {
  width: 57.1428571429%;
}
.grid-form [data-row-span="7"] > [data-field-span="5"] {
  width: 71.4285714286%;
}
.grid-form [data-row-span="7"] > [data-field-span="6"] {
  width: 85.7142857143%;
}
.grid-form [data-row-span="7"] > [data-field-span="7"] {
  width: 100%;
}
.grid-form [data-row-span="8"] > [data-field-span="1"] {
  width: 12.5%;
}
.grid-form [data-row-span="8"] > [data-field-span="2"] {
  width: 25%;
}
.grid-form [data-row-span="8"] > [data-field-span="3"] {
  width: 37.5%;
}
.grid-form [data-row-span="8"] > [data-field-span="4"] {
  width: 50%;
}
.grid-form [data-row-span="8"] > [data-field-span="5"] {
  width: 62.5%;
}
.grid-form [data-row-span="8"] > [data-field-span="6"] {
  width: 75%;
}
.grid-form [data-row-span="8"] > [data-field-span="7"] {
  width: 87.5%;
}
.grid-form [data-row-span="8"] > [data-field-span="8"] {
  width: 100%;
}
.grid-form [data-row-span="9"] > [data-field-span="1"] {
  width: 11.1111111111%;
}
.grid-form [data-row-span="9"] > [data-field-span="2"] {
  width: 22.2222222222%;
}
.grid-form [data-row-span="9"] > [data-field-span="3"] {
  width: 33.3333333333%;
}
.grid-form [data-row-span="9"] > [data-field-span="4"] {
  width: 44.4444444444%;
}
.grid-form [data-row-span="9"] > [data-field-span="5"] {
  width: 55.5555555556%;
}
.grid-form [data-row-span="9"] > [data-field-span="6"] {
  width: 66.6666666667%;
}
.grid-form [data-row-span="9"] > [data-field-span="7"] {
  width: 77.7777777778%;
}
.grid-form [data-row-span="9"] > [data-field-span="8"] {
  width: 88.8888888889%;
}
.grid-form [data-row-span="9"] > [data-field-span="9"] {
  width: 100%;
}
.grid-form [data-row-span="10"] > [data-field-span="1"] {
  width: 10%;
}
.grid-form [data-row-span="10"] > [data-field-span="2"] {
  width: 20%;
}
.grid-form [data-row-span="10"] > [data-field-span="3"] {
  width: 30%;
}
.grid-form [data-row-span="10"] > [data-field-span="4"] {
  width: 40%;
}
.grid-form [data-row-span="10"] > [data-field-span="5"] {
  width: 50%;
}
.grid-form [data-row-span="10"] > [data-field-span="6"] {
  width: 60%;
}
.grid-form [data-row-span="10"] > [data-field-span="7"] {
  width: 70%;
}
.grid-form [data-row-span="10"] > [data-field-span="8"] {
  width: 80%;
}
.grid-form [data-row-span="10"] > [data-field-span="9"] {
  width: 90%;
}
.grid-form [data-row-span="10"] > [data-field-span="10"] {
  width: 100%;
}
.grid-form [data-row-span="11"] > [data-field-span="1"] {
  width: 9.0909090909%;
}
.grid-form [data-row-span="11"] > [data-field-span="2"] {
  width: 18.1818181818%;
}
.grid-form [data-row-span="11"] > [data-field-span="3"] {
  width: 27.2727272727%;
}
.grid-form [data-row-span="11"] > [data-field-span="4"] {
  width: 36.3636363636%;
}
.grid-form [data-row-span="11"] > [data-field-span="5"] {
  width: 45.4545454545%;
}
.grid-form [data-row-span="11"] > [data-field-span="6"] {
  width: 54.5454545455%;
}
.grid-form [data-row-span="11"] > [data-field-span="7"] {
  width: 63.6363636364%;
}
.grid-form [data-row-span="11"] > [data-field-span="8"] {
  width: 72.7272727273%;
}
.grid-form [data-row-span="11"] > [data-field-span="9"] {
  width: 81.8181818182%;
}
.grid-form [data-row-span="11"] > [data-field-span="10"] {
  width: 90.9090909091%;
}
.grid-form [data-row-span="11"] > [data-field-span="11"] {
  width: 100%;
}
.grid-form [data-row-span="12"] > [data-field-span="1"] {
  width: 8.3333333333%;
}
.grid-form [data-row-span="12"] > [data-field-span="2"] {
  width: 16.6666666667%;
}
.grid-form [data-row-span="12"] > [data-field-span="3"] {
  width: 25%;
}
.grid-form [data-row-span="12"] > [data-field-span="4"] {
  width: 33.3333333333%;
}
.grid-form [data-row-span="12"] > [data-field-span="5"] {
  width: 41.6666666667%;
}
.grid-form [data-row-span="12"] > [data-field-span="6"] {
  width: 50%;
}
.grid-form [data-row-span="12"] > [data-field-span="7"] {
  width: 58.3333333333%;
}
.grid-form [data-row-span="12"] > [data-field-span="8"] {
  width: 66.6666666667%;
}
.grid-form [data-row-span="12"] > [data-field-span="9"] {
  width: 75%;
}
.grid-form [data-row-span="12"] > [data-field-span="10"] {
  width: 83.3333333333%;
}
.grid-form [data-row-span="12"] > [data-field-span="11"] {
  width: 91.6666666667%;
}
.grid-form [data-row-span="12"] > [data-field-span="12"] {
  width: 100%;
}
.grid-form [data-row-span].disabled {
  display: none;
}

/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}

.leaflet-container {
  overflow: hidden;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
  background: transparent;
}

/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
  image-rendering: -webkit-optimize-contrast;
}

/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
  width: 1600px;
  height: 1600px;
  -webkit-transform-origin: 0 0;
}

.leaflet-marker-icon,
.leaflet-marker-shadow {
  display: block;
}

/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
}

.leaflet-container.leaflet-touch-zoom {
  -ms-touch-action: pan-x pan-y;
  touch-action: pan-x pan-y;
}

.leaflet-container.leaflet-touch-drag {
  -ms-touch-action: pinch-zoom;
  /* Fallback for FF which doesn't support pinch-zoom */
  touch-action: none;
  touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  -ms-touch-action: none;
  touch-action: none;
}

.leaflet-container {
  -webkit-tap-highlight-color: transparent;
}

.leaflet-container a {
  -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}

.leaflet-tile {
  filter: inherit;
  visibility: hidden;
}

.leaflet-tile-loaded {
  visibility: inherit;
}

.leaflet-zoom-box {
  width: 0;
  height: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 800;
}

/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
  -moz-user-select: none;
}

.leaflet-pane {
  z-index: 400;
}

.leaflet-tile-pane {
  z-index: 200;
}

.leaflet-overlay-pane {
  z-index: 400;
}

.leaflet-shadow-pane {
  z-index: 500;
}

.leaflet-marker-pane {
  z-index: 600;
}

.leaflet-tooltip-pane {
  z-index: 650;
}

.leaflet-popup-pane {
  z-index: 700;
}

.leaflet-map-pane canvas {
  z-index: 100;
}

.leaflet-map-pane svg {
  z-index: 200;
}

.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}

.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}

/* control positioning */
.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}

.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}

.leaflet-top {
  top: 0;
}

.leaflet-right {
  right: 0;
}

.leaflet-bottom {
  bottom: 0;
}

.leaflet-left {
  left: 0;
}

.leaflet-control {
  float: left;
  clear: both;
}

.leaflet-right .leaflet-control {
  float: right;
}

.leaflet-top .leaflet-control {
  margin-top: 10px;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 10px;
}

.leaflet-left .leaflet-control {
  margin-left: 10px;
}

.leaflet-right .leaflet-control {
  margin-right: 10px;
}

/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
  will-change: opacity;
}

.leaflet-fade-anim .leaflet-popup {
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
  opacity: 1;
}

.leaflet-zoom-animated {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}

.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
}

.leaflet-zoom-anim .leaflet-zoom-hide {
  visibility: hidden;
}

/* cursors */
.leaflet-interactive {
  cursor: pointer;
}

.leaflet-grab {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
  cursor: crosshair;
}

.leaflet-popup-pane,
.leaflet-control {
  cursor: auto;
}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
  pointer-events: none;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
  pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
  pointer-events: auto;
}

/* visual tweaks */
.leaflet-container {
  background: #ddd;
  outline: 0;
}

.leaflet-container a {
  color: #0078A8;
}

.leaflet-container a.leaflet-active {
  outline: 2px solid orange;
}

.leaflet-zoom-box {
  border: 2px dotted #38f;
  background: rgba(255, 255, 255, 0.5);
}

/* general typography */
.leaflet-container {
  font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

/* general toolbar styles */
.leaflet-bar {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 26px;
  height: 26px;
  line-height: 26px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
}

.leaflet-bar a,
.leaflet-control-layers-toggle {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}

.leaflet-bar a:hover {
  background-color: #f4f4f4;
}

.leaflet-bar a:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.leaflet-bar a:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: none;
}

.leaflet-bar a.leaflet-disabled {
  cursor: default;
  background-color: #f4f4f4;
  color: #bbb;
}

.leaflet-touch .leaflet-bar a {
  width: 30px;
  height: 30px;
  line-height: 30px;
}

.leaflet-touch .leaflet-bar a:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.leaflet-touch .leaflet-bar a:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px "Lucida Console", Monaco, monospace;
  text-indent: 1px;
}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
  font-size: 22px;
}

/* layers control */
.leaflet-control-layers {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: #fff;
  border-radius: 5px;
}

.leaflet-control-layers-toggle {
  background-image: url(images/layers.png);
  width: 36px;
  height: 36px;
}

.leaflet-retina .leaflet-control-layers-toggle {
  background-image: url(images/layers-2x.png);
  background-size: 26px 26px;
}

.leaflet-touch .leaflet-control-layers-toggle {
  width: 44px;
  height: 44px;
}

.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: none;
}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
  display: block;
  position: relative;
}

.leaflet-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: #333;
  background: #fff;
}

.leaflet-control-layers-scrollbar {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 5px;
}

.leaflet-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}

.leaflet-control-layers label {
  display: block;
}

.leaflet-control-layers-separator {
  height: 0;
  border-top: 1px solid #ddd;
  margin: 5px -10px 5px -6px;
}

/* Default icon URLs */
.leaflet-default-icon-path {
  background-image: url(images/marker-icon.png);
}

/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
  background: #fff;
  background: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.leaflet-control-attribution,
.leaflet-control-scale-line {
  padding: 0 5px;
  color: #333;
}

.leaflet-control-attribution a {
  text-decoration: none;
}

.leaflet-control-attribution a:hover {
  text-decoration: underline;
}

.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
  font-size: 11px;
}

.leaflet-left .leaflet-control-scale {
  margin-left: 5px;
}

.leaflet-bottom .leaflet-control-scale {
  margin-bottom: 5px;
}

.leaflet-control-scale-line {
  border: 2px solid #777;
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
}

.leaflet-control-scale-line:not(:first-child) {
  border-top: 2px solid #777;
  border-bottom: none;
  margin-top: -2px;
}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
  border-bottom: 2px solid #777;
}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  box-shadow: none;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

/* popup */
.leaflet-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}

.leaflet-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: 12px;
}

.leaflet-popup-content {
  margin: 13px 19px;
  line-height: 1.4;
}

.leaflet-popup-content p {
  margin: 18px 0;
}

.leaflet-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}

.leaflet-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: white;
  color: #333;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 4px 0 0;
  border: none;
  text-align: center;
  width: 18px;
  height: 14px;
  font: 16px/14px Tahoma, Verdana, sans-serif;
  color: #c3c3c3;
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: #999;
}

.leaflet-popup-scrolled {
  overflow: auto;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

.leaflet-oldie .leaflet-popup-content-wrapper {
  -ms-zoom: 1;
}

.leaflet-oldie .leaflet-popup-tip {
  width: 24px;
  margin: 0 auto;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}

.leaflet-oldie .leaflet-popup-tip-container {
  margin-top: -1px;
}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
  border: 1px solid #999;
}

/* div icon */
.leaflet-div-icon {
  background: #fff;
  border: 1px solid #666;
}

/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
  position: absolute;
  padding: 6px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #222;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.leaflet-tooltip.leaflet-clickable {
  cursor: pointer;
  pointer-events: auto;
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Directions */
.leaflet-tooltip-bottom {
  margin-top: 6px;
}

.leaflet-tooltip-top {
  margin-top: -6px;
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
  left: 50%;
  margin-left: -6px;
}

.leaflet-tooltip-top:before {
  bottom: 0;
  margin-bottom: -12px;
  border-top-color: #fff;
}

.leaflet-tooltip-bottom:before {
  top: 0;
  margin-top: -12px;
  margin-left: -6px;
  border-bottom-color: #fff;
}

.leaflet-tooltip-left {
  margin-left: -6px;
}

.leaflet-tooltip-right {
  margin-left: 6px;
}

.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
  top: 50%;
  margin-top: -6px;
}

.leaflet-tooltip-left:before {
  right: 0;
  margin-right: -12px;
  border-left-color: #fff;
}

.leaflet-tooltip-right:before {
  left: 0;
  margin-left: -12px;
  border-right-color: #fff;
}

.leaflet-control-layers-group-name {
  font-weight: bold;
  margin-bottom: 0.2em;
  display: block;
}

.leaflet-control-layers-group {
  margin-bottom: 0.5em;
}

.leaflet-control-layers-group label {
  padding-left: 0.5em;
}

.leaflet-tooltip {
  position: absolute;
  padding: 5px 10px;
  color: #fff;
  background-color: #637c6b;
  border: 0;
  border-radius: 0;
  box-shadow: unset;
  font-size: 12px;
}
.leaflet-tooltip.regions-tooltip {
  background-color: #105e85;
}

.leaflet-tooltip-top:before {
  border-top-color: #105e85;
}

.leaflet-tooltip-bottom:before {
  border-bottom-color: #105e85;
}

.leaflet-tooltip-left:before {
  border-left-color: #105e85;
}

.leaflet-tooltip-right:before {
  border-right-color: #105e85;
}

/*# sourceMappingURL=base.css.map */

/* IWMI "analyst workbench" styling for datacube-explorer.
 *
 * Appended to cubedash's own base.css at image build time, because Explorer's
 * theme mechanism covers only the logo, favicon and default map position --
 * layout/base.html loads a single hard-coded stylesheet with no hook for a
 * second one. Appending keeps the upstream file intact and relies on the
 * cascade: same specificity, later wins.
 *
 * ---------------------------------------------------------------------------
 * DESIGN TARGET: "Analyst workbench redesign/Data Cube Products.dc.html" in
 * this repository. The tokens below are lifted from that mock verbatim:
 *
 *   page wash        #F2F3F4          hairline   #E8E7E7
 *   card border      #E8E7E7          field brd  #DCDEE1
 *   ink              #17202B          body ink   #3F4A57
 *   secondary ink    #5A6672          quiet ink  #7A848F
 *   placeholder ink  #9AA3AD
 *   navy (accent)    #28537D          hover      #1E4166
 *   light blue       #5088C6          soft blue  #F2F6FA / #D8E3EE
 *   raster cyan      #46BBD4 (ink #1E7F94)
 *   vector green     #22AD7A (ink #17805A)
 *   caveat orange    #E86933 (ink #B84E1D)
 *   display face     DM Serif Text    body face  Public Sans   mono ui-monospace
 *
 * The workbench mock is a products-page redesign; the /products page is
 * rebuilt into that three-pane layout by include-global.env.html (the .iwmi-wb
 * component classes at the bottom of this file). Every other Explorer page
 * gets the same tokens applied to upstream's own markup.
 *
 * ---------------------------------------------------------------------------
 * READ THIS BEFORE ADDING A RULE.
 *
 * 1. Upstream ships TWO panel surfaces and this file collapses both to white:
 *
 *      .panel.highlight   upstream dark (#474747, color #efefef) -> WHITE here
 *      .panel             upstream #e6edef                       -> WHITE here
 *
 *    Explorer uses .panel.highlight for the main listing on nearly every page,
 *    so leaving it dark makes the whole app dark. Every rule that assumed a
 *    dark surface has to flip with it: headings, links, muted text, badges,
 *    table stripes. They are grouped together for that reason.
 *
 * 2. Never write a bare `h1, h2, h3 { color: ... }`. The masthead nav and the
 *    product/year selector bar both use `h2.ex-menu-title`, and the nav one
 *    sits on brand navy. An unscoped heading colour breaks one of them -- that
 *    bug shipped once already, at 1.16:1.
 *
 * 3. Check the selector against the real markup before styling it. Upstream
 *    uses `#breadcrumb`, not `.breadcrumb`, and there is no element with class
 *    `content` -- an earlier version of this file styled both and neither rule
 *    ever matched anything.
 * ---------------------------------------------------------------------------
 */

/* Fonts are vendored into the theme (served at /_theme/iwmi/) rather than
   loaded from Google Fonts as the mock does: pages need no third-party origin
   at runtime. swap keeps text visible while they load. */
@font-face {
  font-family: "DM Serif Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_theme/iwmi/dmseriftext-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/_theme/iwmi/dmseriftext-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300 700;   /* variable range; one file covers every weight used */
  font-display: swap;
  src: url("/_theme/iwmi/publicsans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "DM Serif Text", Georgia, "Times New Roman", serif;
  /* National is the brand's body face (branding.iwmi.org/our-typography). It is a
     commercial licence, so it cannot ship here: named first for anyone who has it
     installed, with Public Sans -- close in width and tone, freely licensed -- behind
     it. Add an @font-face for "National" beside the others if IWMI supplies web
     fonts; nothing else needs to change. */
  --font-body: "National", "National Book", "Public Sans", system-ui,
               -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --page: #f2f3f4;
  --surface: #ffffff;
  --surface-wash: #fafbfc;
  --hairline: #e8e7e7;
  --hairline-soft: #eff0f1;
  --field-border: #dcdee1;

  --ink: #17202b;
  --ink-body: #3f4a57;
  --ink-2: #5a6672;
  --ink-3: #7a848f;
  --ink-4: #9aa3ad;

  --navy: #28537d;
  --navy-hover: #1e4166;
  --blue: #5088c6;
  --blue-soft: #f2f6fa;
  --blue-soft-border: #d8e3ee;

  --raster: #46bbd4;
  --raster-ink: #1e7f94;
  --vector: #22ad7a;
  --vector-ink: #17805a;
  --wait: #dd9103;          /* brand secondary yellow: queued */
  --wait-ink: #8a5b02;
  --caveat: #e86933;
  --caveat-ink: #b84e1d;

  /* Spacing unit. Referenced by .iwmi-filter as var(--s) since before
     the workbench, but never defined -- so both declarations using it
     were invalid at computed-value time and silently dropped. 14px is
     the rhythm the rest of this file uses. */
  --s: 14px;
  --r-pill: 999px;

  /* Eyebrow label used all over the mock. Applied via this shorthand comment
     rather than a utility class because upstream markup can't take classes:
     font-size 10px / weight 700 / letter-spacing .10em / uppercase / ink-4. */
}

/* --- page shell ----------------------------------------------------------- */
/* Upstream makes `body` the centred, max-width column and paints the page
   background on it. The workbench washes the whole viewport instead, and each
   band centres its own contents. */

html {
  background: var(--page);
  scrollbar-color: rgba(40, 83, 125, 0.25) transparent;
}

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--ink-body);
  font-size: 14px;
  line-height: 1.5;
  max-width: none;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--navy);
  text-decoration: none;
}

a:hover {
  color: var(--blue);
  text-decoration: underline;
}

/* --- masthead ------------------------------------------------------------- */
/* The mock's 60px navy bar: logo, hairline divider, "Data Cube" in the display
   serif, then a translucent pill rail of nav items. */

.header {
  background: var(--navy);
  border-bottom: 0;
  box-shadow: none;
  align-items: center;
  gap: 18px;
  min-height: 60px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.header #logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header #logo img {
  height: 34px;
  width: auto;
  display: block;
  margin: 0;
  padding: 0;
}

.header #logo > .instance-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  letter-spacing: 0.005em;
  white-space: nowrap;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.header #logo > .instance-title::before {
  content: none;
}

/* Nav: one translucent pill rail, each item a pill; hovering fills it. The
   mock marks the current section with a solid white pill -- a server-rendered
   app doesn't know which item is current from CSS alone, so hover/open state
   carries the affordance instead. */
.header #menu-link > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
}

.header #menu-link > ul > li > .ex-menu-title,
.header #menu-link > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}

.header #menu-link > ul > li > a i {
  font-size: 13px;
}

.header #menu-link > ul > li > .ex-menu-title:hover,
.header #menu-link > ul > li > a:hover,
.header #menu-link > ul > li.is-open > .ex-menu-title {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
}

/* Leaves the cube. The trailing arrow is smaller and dimmer than the leading
   icon: it is a footnote on the label, not a second icon competing with it. */
.header #menu-link > ul > li > a.is-external > i:last-child {
  font-size: 8.5px;
  opacity: 0.65;
  margin-left: -1px;
}

/* The current section: a solid white pill, as the mock marks it. */
.header #menu-link > ul > li > a.active,
.header #menu-link > ul > li > a.active:hover {
  background: #fff;
  color: var(--navy);
  font-weight: 600;
}

/* Dropdown panels are light cards. */
.header #menu-link ul > li > ul {
  border-radius: 10px;
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 30px rgba(23, 32, 43, 0.16);
  overflow: hidden;
  padding: 4px;
  background: var(--surface);
}

.header #menu-link ul > li > ul > li > a {
  color: var(--ink-body);
  border-radius: 7px;
  font-size: 12.5px;
}

.header #menu-link ul > li > ul > li:hover {
  background: var(--blue-soft);
  border-radius: 7px;
}

.header #menu-link ul > li > ul > li:hover a {
  color: var(--navy);
}

/* Measured: logo 361 + nav 553 + the search at its 178px floor + gutters needs
   1117px. Below that the row cannot hold all three and the masthead pushed the
   whole page sideways -- 17px over at 1100, 93px at 1024, 217px at 900, with
   the search sliced off at the right edge.

   Wrapping is the fix, and `flex: 1 1 220px` makes it degrade in stages rather
   than all at once: the search drops onto its own line first and grows to fill
   it, then near 810px the nav drops too and the two share a line where they
   fit. No width is left overflowing, and every nav item stays reachable. */
@media (max-width: 1120px) {
  .header {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .header .iwmi-wb-search {
    order: 3;
    flex: 1 1 220px;
    box-sizing: border-box;
    min-width: 0;
  }
}

/* Upstream's own answer below 800px is `position: absolute; bottom: 0; left: 0`
   on the instance title, which pins it to the page shell rather than the
   masthead. Back in flow, and the column stops centring so #logo wraps inside
   the gutter instead of spilling past it. */
@media (max-width: 800px) {
  .header {
    gap: 10px;
    align-items: stretch;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header #logo {
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }

  .header #logo img {
    height: 28px;
  }

  .header #logo > .instance-title {
    position: static;
  }

  /* The rail scrolls rather than pushing the masthead wider -- but overflow-x
     cannot take effect while the flex item is still free to size to its
     content, so both the item and the rail need min-width: 0. Without it the
     nav simply runs off the right edge and the end items are unreachable. */
  .header #menu-link {
    min-width: 0;
  }

  .header #menu-link > ul {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    justify-content: flex-start;
  }

  .header #menu-link > ul::-webkit-scrollbar {
    display: none;
  }
}

/* Upstream switches .header to `flex-direction: column` at exactly this width
   (base.css). Everything in this file's masthead was sized for a row, and two
   rules turn into visible bugs once the axis flips -- so this block is keyed to
   upstream's 750px rather than a nearby round number.

   The ellipse: .iwmi-wb-search carries `flex: 0 1 300px`, which in a column is
   300px of HEIGHT. Combined with the pill radius and the translucent white
   fill, the search rendered as a navy oval most of a phone screen tall. */
@media (max-width: 750px) {
  /* No `width: 100%` here. Upstream does not set a global border-box, so 100%
     resolves against the header's content box and then the pill's own 14px of
     side padding is added on top -- 8px past the viewport, which is enough to
     make the whole page scroll sideways. The `align-items: stretch` above
     already gives full width on the cross axis; box-sizing is belt-and-braces
     for anything that sets an explicit width later. */
  .header .iwmi-wb-search {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Full-width in a column, so the scrollable rail spans the masthead. */
  .header #menu-link,
  .header #menu-link > ul {
    width: 100%;
  }
}

/* --- breadcrumb ------------------------------------------------------------ */
/* Quiet trail on the wash, as in the mock: 11px, chevron-separated. The
   >> separators are baked into the template text, so colour is all CSS can
   change. */

#breadcrumb {
  background: transparent;
  color: var(--ink-4);
  font-weight: 500;
  font-size: 11px;
  padding: 14px 28px 0;
}

#breadcrumb a.item {
  color: var(--ink-3);
  text-decoration: none;
}

#breadcrumb a.item:hover {
  color: var(--navy);
  text-decoration: underline;
}

#breadcrumb .item {
  color: var(--ink-2);
}

/* --- product / year selector bar ------------------------------------------- */
/* The <header> band between the breadcrumb and the panels, dark grey upstream:
   white pill-ish cards on the wash here. */

header {
  background: transparent;
  color: var(--ink);
  padding: 12px 28px 0;
  gap: 10px;
  flex-wrap: wrap;
}

.header-option {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 32, 43, 0.04);
}

.header-option.primary {
  background-color: var(--surface);
  flex: 1 1 auto;
}

.header-option:hover,
.header-option.primary:hover {
  background-color: var(--surface);
  border-color: var(--field-border);
}

.header-option.is-open,
.header-option.is-open:hover {
  background-color: var(--surface);
  border-color: var(--navy);
  box-shadow: 0 6px 22px rgba(40, 83, 125, 0.13);
}

/* Selector titles are controls, not prose: body font, never the serif.
   Scoped so it cannot reach the nav headings on the navy masthead. */
header .header-option > .option-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}

header .header-option .option-description {
  color: var(--ink-2);
  font-weight: 400;
}

.header-option.is-open .option-title:hover {
  color: var(--navy);
}

.header-option .option-menu,
.header-option.is-open .option-menu {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(23, 32, 43, 0.16);
  overflow: hidden;
}

.header-option a.option-menu-link {
  color: var(--ink-body);
  font-weight: 500;
  font-size: 12.5px;
}

.header-option a.option-menu-link.active {
  background-color: var(--navy);
  color: #fff;
}

.header-option a.option-menu-link:hover {
  background-color: var(--blue-soft);
  color: var(--navy);
  text-decoration: none;
}

.header-option a.option-menu-link.active:hover {
  background-color: var(--navy-hover);
  color: #fff;
}

.header-option .group-name {
  color: var(--ink-4);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}

/* --- panels: white cards on the wash ---------------------------------------- */
/* overflow: hidden is load-bearing: .data-table deliberately bleeds 30px past
   the panel padding on each side, and clipping turns that bleed into an
   edge-to-edge header row instead of a spill over the rounded corners. */

#content {
  background: transparent;
  padding: 18px 28px 0;
}

.panel,
.panel.odd,
.panel.highlight {
  background: var(--surface);
  color: var(--ink-body);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 32, 43, 0.04);
  overflow: hidden;
  margin-bottom: 18px;
}

.panels {
  gap: 18px;
}

/* Not a .panel -- upstream gives it only `.map-panel`. */
.map-panel {
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(23, 32, 43, 0.04);
  overflow: hidden;
  margin-bottom: 18px;
}

/* Headings. `.panel.highlight > h1` is upstream's, at (0,2,1), and has to be
   answered at equal specificity or an h1 in a highlight panel stays white on
   white. Rule 2 in the header applies. */
#content :is(h1, h2, h3),
.panel :is(h1, h2, h3),
.panel.highlight > :is(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 400;      /* DM Serif Text ships one weight; bolding synthesises */
  color: var(--navy);
  letter-spacing: -0.005em;
  line-height: 1.15;
}

#content :is(h4, h5, h6),
.panel :is(h4, h5, h6) {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
}

#content h1,
.panel h1 {
  font-size: 22px;
  line-height: 1.2;
}

/* Upstream sizes the info panel at 250px, which leaves 190px of content once
   the panel's padding is off -- too narrow for a product name to fit. */
@media (min-width: 800px) {
  .info-panel {
    width: 280px;
  }
}

/* h1 on a product page is `<h1><strong>name</strong> whole collection</h1>`.
   A snake_case identifier belongs in the mono face, exactly as the mock sets
   product ids. anywhere is the last resort for a longer name: the panel now
   clips, so an overflowing one would be cut rather than spill. */
#content h1 strong,
.panel h1 strong {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.75em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Upstream's `.panel.highlight a` is #aeaeae for a dark panel that is white
   here -- 2.0:1 if left alone. Same specificity, later in the cascade. */
.panel a,
.panel.highlight a {
  color: var(--navy);
}

.panel a:hover,
.panel.highlight a:hover {
  color: var(--blue);
}

.panel .muted,
.panel.highlight .muted,
.muted {
  color: var(--ink-2);
}

/* The "no URL yet" picker under the Raster URL field. Indented and on the soft
   blue, so it reads as help attached to that field rather than two more required
   questions. */
/* --- the assistant ------------------------------------------------------------- */
/* The way in: a pill fixed bottom-right, where the panel opens. Deliberately not
   in the product action row, which is about the list; and styled here in full so
   no rule for <button> elsewhere on the page can stack its icon over its label. */
.iwmi-wb-ask-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1140;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(40, 83, 125, 0.35);
  transition: background 0.18s ease, transform 0.18s ease;
}

.iwmi-wb-ask-fab:hover {
  background: var(--navy-hover);
  transform: translateY(-1px);
}

.iwmi-wb-ask-fab:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.iwmi-wb-ask-fab[hidden] { display: none; }

@media (max-width: 620px) {
  .iwmi-wb-ask-fab { right: 12px; bottom: 12px; padding: 11px 16px; }
}

@media print {
  .iwmi-wb-ask-fab, .iwmi-wb-agent { display: none; }
}

/* A conversation, docked bottom-right, on the same surface tokens as the panel so
   it reads as part of the workbench and not a widget dropped on top of it. */
.iwmi-wb-agent {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1150;
  width: min(440px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(40, 83, 125, 0.22);
  overflow: hidden;
}

.iwmi-wb-agent[hidden] { display: none; }

.iwmi-wb-agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--navy);
  color: #fff;
}

.iwmi-wb-agent-title {
  font-family: "DM Serif Text", Georgia, serif;
  font-size: 18px;
}

.iwmi-wb-agent-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.iwmi-wb-agent-close:hover { color: #fff; }

.iwmi-wb-agent-lede {
  margin: 0;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  border-bottom: 1px solid var(--field-border);
}

.iwmi-wb-agent-log {
  flex: 1 1 auto;
  /* Small enough that the upload strip, open, still leaves the composer on
     screen inside the panel's 640px: at 160px the strip pushed the composer out
     of the bottom of the panel, and the way to say something was gone. */
  min-height: 72px;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iwmi-wb-agent-msg {
  max-width: 92%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.iwmi-wb-agent-msg p { margin: 0; }
.iwmi-wb-agent-msg p + p { margin-top: 8px; }

.iwmi-wb-agent-msg.me {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.iwmi-wb-agent-msg.bot {
  align-self: flex-start;
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft-border);
  border-bottom-left-radius: 4px;
}

.iwmi-wb-agent-msg.thinking { color: var(--ink-3); }
.iwmi-wb-agent-msg.err { background: #fff4ee; border-color: #f2c4ad; color: #9a3b12; }
.iwmi-wb-agent-msg.act { background: #eefaf5; border-color: #bfe8d6; color: var(--vector-ink); }

/* Uploading from the conversation: the same questions the workbench asks, in a
   strip above the composer, shown by the paperclip. */
.iwmi-wb-agent-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Gives way before the composer does: shrinks and scrolls when the panel is
     short, rather than pushing the form below the panel's edge. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--field-border);
  background: var(--blue-soft);
}

.iwmi-wb-agent-upload[hidden] { display: none; }

.iwmi-wb-agent-upload .in {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
}

.iwmi-wb-agent-upload .in[hidden] { display: none; }

.iwmi-wb-agent-upload .iwmi-wb-btn { align-self: flex-start; }

.iwmi-wb-agent-upload .hint { font-size: 12px; color: var(--ink-2); }
.iwmi-wb-agent-upload .hint.bad { color: #9a3b12; }
.iwmi-wb-agent-upload .hint[hidden] { display: none; }

/* Who is uploading: a line naming you, or the sign-in itself -- the workbench's
   address-and-code, at the strip's width. The fields below it are hidden until a
   session stands. */
.iwmi-wb-agent-auth { display: flex; flex-direction: column; gap: 8px; }
.iwmi-wb-agent-auth .who {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--ink-body);
}
.iwmi-wb-agent-auth .who span { font-weight: 600; }
.iwmi-wb-agent-auth .who[hidden] { display: none; }
.iwmi-wb-agent-auth .signin { display: flex; flex-direction: column; gap: 8px; }
.iwmi-wb-agent-auth .signin[hidden] { display: none; }
.iwmi-wb-agent-auth .signin .hint { margin: 0; max-width: 52ch; }
.iwmi-wb-agent-auth .row { display: flex; gap: 8px; align-items: center; }
.iwmi-wb-agent-auth .row .in { flex: 1 1 auto; min-width: 0; }
.iwmi-wb-agent-auth .row .iwmi-wb-btn { flex: none; min-height: 36px; white-space: nowrap; }
/* Six digits, sized for six; the letter-spacing is for the digits, not the
   placeholder, which it would otherwise push past the end of the box. */
.iwmi-wb-agent-auth .row .in.code {
  flex: 0 0 11em;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  text-align: center;
}
.iwmi-wb-agent-auth .row .in.code::placeholder {
  letter-spacing: normal;
  font-family: inherit;
  opacity: .65;
}
.iwmi-wb-agent-upload .fields { display: flex; flex-direction: column; gap: 8px; }
.iwmi-wb-agent-upload .fields[hidden] { display: none; }

.iwmi-wb-agent-attach {
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--navy);
  font-size: 16px;
  cursor: pointer;
}

.iwmi-wb-agent-attach:hover { background: var(--blue-soft); }

.iwmi-wb-agent-form {
  display: flex;
  flex: none;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid var(--field-border);
  background: var(--surface);
}

.iwmi-wb-agent-form textarea.in {
  flex: 1 1 auto;
  resize: none;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
}

.iwmi-wb-agent-form textarea.in:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, 0.25);
}

@media (max-width: 620px) {
  .iwmi-wb-agent { right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 80vh; }
}

/* --- page-level notice --------------------------------------------------------- */
/* What a successful submit leaves behind once the panel has closed: one line,
   bottom centre, in the brand navy so it reads as the cube speaking and not the
   browser. It carries an action when there is one (the governance block) and then
   waits to be dismissed; otherwise it goes on its own. */
.iwmi-wb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(720px, calc(100vw - 32px));
  padding: 12px 16px 12px 18px;
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(40, 83, 125, 0.35);
  font-size: 14px;
  line-height: 1.4;
}

.iwmi-wb-toast[hidden] { display: none; }

.iwmi-wb-toast .fa-circle-check { color: var(--vector); flex: none; }

.iwmi-wb-toast-text { flex: 1 1 auto; min-width: 0; }

.iwmi-wb-toast .iwmi-wb-toast-act {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
}

.iwmi-wb-toast .iwmi-wb-toast-act[hidden] { display: none; }

.iwmi-wb-toast-close {
  flex: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.iwmi-wb-toast-close:hover { color: #fff; }

/* --- basemap ----------------------------------------------------------------- */
/* OpenStreetMap's own tiles in place of CARTO's Positron, which now answers a
   keyless request with an "API KEY REQUIRED" watermark. OSM's styling is much
   louder than what it replaced -- green landcover, coloured roads, dense labels --
   and this map exists to show where data is, not where Mbombela is. So the basemap
   layer alone is drained: grayscale, lifted and flattened until footprints in
   IWMI's sky blue and green are the only colour on it.

   Scoped to the layer, never to .leaflet-tile-pane: data drawn as tiles shares
   that pane, and draining a raster overlay would misrepresent the data itself. */
.iwmi-basemap {
  filter: grayscale(1) brightness(1.12) contrast(0.86);
}

/* The credit the tiles are given away on the condition of. Small, but present:
   the previous basemap was dropped for exactly this kind of term changing. */
.leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink-3);
  padding: 1px 5px;
}

.leaflet-control-attribution a {
  color: var(--ink-2);
}

/* "No URL yet?" and the two boxes behind it, under whichever field asked for a
   raster URL: the index form's, and the definition builder's. */
.iwmi-wb-rasterhelp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* In the builder the help sits inside the blue panel, so the boxes cannot keep the
   same soft blue they have against a white form -- a panel on an identical panel
   reads as one surface with a stray outline. */
.iwmi-wb-draft .iwmi-wb-rasterhelp {
  margin: 2px 0 12px;
}

.iwmi-wb-draft .iwmi-wb-hfpick {
  background: var(--surface);
}

.iwmi-wb-hfpick {
  margin: 10px 0 2px;
  padding: 12px 14px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft-border);
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.iwmi-wb-hfpick select.in {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
}

.iwmi-wb-hfpick select.in:focus,
.iwmi-wb-hfpick input.in:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, 0.25);
}

/* The uploader shares the picker's box. A file input and a text input sit beside
   the selects, so they take the same treatment rather than the browser default. */
.iwmi-wb-hfpick input.in {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
}

.iwmi-wb-hfpick input[type="file"].in {
  padding: 7px 10px;
}

.iwmi-wb-hfpick input[type="file"].in::file-selector-button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.iwmi-wb-hfpick-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  /* Upstream's base.css uppercases every <label>, which turned this one into
     REPLACE A FILE OF THE SAME NAME -- a shouted instruction beside a checkbox
     nobody should feel pushed into ticking. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.iwmi-wb-hfpick .iwmi-wb-btn {
  align-self: flex-start;
}

/* --- badges ------------------------------------------------------------------ */
/* The Text/Stac/Yaml links beside a heading: ghost pills. */

.header-follow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  vertical-align: middle;
}

.header-follow .badge:not(:first-child) {
  margin-left: 0;
}

.badge,
.panel.highlight .badge {
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.badge:hover,
.panel.highlight .badge:hover {
  background: var(--blue-soft);
  border-color: var(--blue-soft-border);
  color: var(--navy);
}

/* The index-dataset action carries the accent fill. */
.badge.iwmi-index-badge,
.panel.highlight .badge.iwmi-index-badge {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.badge.iwmi-index-badge:hover,
.panel.highlight .badge.iwmi-index-badge:hover {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
  color: #fff;
}

/* --- tables -------------------------------------------------------------------- */

table {
  border-collapse: collapse;
}

.panel :is(thead th, .data-table tr.section-header th) {
  background: var(--surface-wash);
  color: var(--ink-4);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
}

.panel .data-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--hairline-soft);
}

.panel .data-table tbody tr:hover,
.panel.highlight .data-table tbody tr:hover,
.panel.odd .data-table tbody tr:hover {
  background-color: var(--surface-wash);
}

.panel :is(td, th) {
  border-color: var(--hairline-soft);
}

/* The metadata-audit table stripes itself pale blue-grey upstream. */
.unavailable-metadata tbody tr:nth-child(even),
.unavailable-metadata tbody tr:nth-child(odd) {
  background-color: transparent;
}

/* Identifiers, counts and dates take the mono face, as everywhere in the mock. */
td.numeric, td.count, .dataset-count, time {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

.data-table td {
  padding-top: 8px;
  padding-bottom: 8px;
}

.data-table tbody td:first-child a {
  font-weight: 600;
}

.header-anchor {
  opacity: 0;
  transition: opacity 120ms ease;
  text-decoration: none;
}

th:hover > .header-anchor,
h1:hover > .header-anchor,
h2:hover > .header-anchor {
  opacity: 0.75;
}

/* --- forms ------------------------------------------------------------------------ */

button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  background-color: var(--navy);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

button:hover {
  background-color: var(--navy-hover);
}

button.small {
  background-color: var(--surface);
  border: 1px solid var(--field-border);
  color: var(--ink-2);
}

button.small:hover {
  background-color: var(--page);
  color: var(--ink);
}

.form-footer select,
.grid-form select {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: 9px;
  padding: 9px 12px;
  outline: none;
}

.grid-form [data-row-span] [data-field-span] {
  border-bottom-color: var(--hairline);
  border-right-color: var(--hairline);
}

.grid-form [data-row-span] [data-field-span] label:first-child {
  color: var(--ink-4);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.grid-form [data-row-span] [data-field-span]:hover,
.grid-form [data-row-span] [data-field-span].focus {
  background: var(--surface-wash);
}

/* --- table / card filter --------------------------------------------------------- */
/* Injected by include-global.env.html above a listing. */

.iwmi-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  clear: both;
  margin: var(--s) 0 calc(var(--s) * 0.75);
}

.iwmi-filter-input {
  flex: 1 1 auto;
  max-width: 340px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.iwmi-filter-input::placeholder {
  color: var(--ink-4);
}

.iwmi-filter-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, 0.25);
}

.iwmi-filter-count {
  font-size: 11.5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.iwmi-filter-empty {
  padding: calc(var(--s) * 0.75) 0;
  color: var(--ink-3);
  font-style: italic;
}

/* --- footer / chrome --------------------------------------------------------------- */

footer {
  color: var(--ink-4);
  padding: 18px 28px 24px;
  font-size: 10.5px;
  line-height: 1.7;
  font-family: var(--font-mono);
}

footer a {
  color: var(--ink-3);
}

/* --- focus visibility --------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.header :where(a, .ex-menu-title):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   Workbench: the /products page, rebuilt by include-global.env.html.

   Three panes inside #content: a filter rail, the product list, and a rail
   with the footprint map and the selected product's specification. The panes
   scroll independently inside the viewport, as in the mock; below 1100px they
   stack and the page scrolls normally.
   =========================================================================== */

/* Several workbench elements set their own display, which beats the UA's
   `[hidden] { display: none }` -- so hidden buttons and facts were rendering.
   One rule restores the attribute's meaning everywhere the workbench owns. */
.iwmi-wb [hidden],
.iwmi-wb-overlay[hidden],
.iwmi-wb-overlay [hidden],
.header .iwmi-wb-search[hidden] {
  display: none !important;
}

/* The page must not double-scroll behind the panes. The class is set on
   <body> by the products-page script, never in a template. */
body.iwmi-wb-page {
  overflow: hidden;
}

body.iwmi-wb-page #breadcrumb,
body.iwmi-wb-page footer {
  display: none;
}

body.iwmi-wb-page #content {
  padding: 0;
}

.iwmi-wb {
  display: flex;
  min-height: 0;
  max-width: 100%;
  /* Masthead is sticky and 60px; the workbench takes the rest. dvh second so
     it wins where supported: with vh alone, mobile browser chrome makes the
     pane taller than the visible area and the page double-scrolls. Only the
     three-pane layout above 1100px uses this height at all. */
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  background: var(--page);
}

/* --- left rail: filters, endpoints, health ------------------------------- */

.iwmi-wb-left {
  flex: 0 2 252px;
  min-width: 196px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  overflow-y: auto;
}

.iwmi-wb-section {
  padding: 18px;
}

.iwmi-wb-section + .iwmi-wb-section {
  border-top: 1px solid var(--hairline);
}

.iwmi-wb-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 11px;
}

.iwmi-wb-sublabel {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0 0 8px;
}

.iwmi-wb-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.iwmi-wb-chiprow:last-child {
  margin-bottom: 0;
}

.iwmi-wb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--field-border);
  background: var(--surface);
  color: var(--ink-2);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.iwmi-wb-chip:hover {
  border-color: var(--ink-4);
  background: var(--surface);
  color: var(--ink);
}

.iwmi-wb-chip[aria-pressed="true"],
.iwmi-wb-chip[aria-pressed="true"]:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.iwmi-wb-chip .count {
  opacity: 0.6;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* Time coverage sparkline. */
.iwmi-wb-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  padding: 0 1px;
}

.iwmi-wb-spark > div {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  background: #cfd3d7;
}

.iwmi-wb-spark > div.mid { background: var(--blue); }
.iwmi-wb-spark > div.high { background: var(--navy); }

.iwmi-wb-spark-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 6px;
  font-family: var(--font-mono);
}

.iwmi-wb-linkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  margin: 0 -9px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ink-body);
  text-decoration: none;
}

.iwmi-wb-linkrow:hover {
  background: var(--blue-soft);
  color: var(--navy);
  text-decoration: none;
}

.iwmi-wb-linkrow i {
  font-size: 13px;
  width: 14px;
  color: var(--blue);
}

.iwmi-wb-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
}

.iwmi-wb-stat .k { color: var(--ink-2); }

.iwmi-wb-stat .v {
  font-family: var(--font-mono);
  color: var(--ink);
}

.iwmi-wb-stat .v.warn {
  color: var(--caveat);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.iwmi-wb-version {
  margin-top: auto;
  padding: 16px 18px 18px;
  font-size: 10.5px;
  color: var(--ink-4);
  line-height: 1.7;
  font-family: var(--font-mono);
}

/* --- main column: heading + cards ------------------------------------------ */

.iwmi-wb-main {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.iwmi-wb-head {
  padding: 22px 28px 0;
}

/* Breadcrumb, relocated into the column and chevron-separated. */
.iwmi-wb-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ink-4);
  margin-bottom: 14px;
}

.iwmi-wb-crumbs i {
  font-size: 8px;
}

.iwmi-wb-crumbs a.item {
  color: var(--ink-3);
  text-decoration: none;
}

.iwmi-wb-crumbs a.item:hover {
  color: var(--navy);
  text-decoration: none;
}

.iwmi-wb-crumbs span.item {
  color: var(--ink-2);
}

.iwmi-wb-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* The workbench's own h1. The generic heading rules above carry an ID
   selector -- (1,0,1) -- so every workbench heading override below must ride
   on #content too or it silently loses. */
#content .iwmi-wb-head h1 {
  margin: 0;
  font-size: 34px;
}

.iwmi-wb-lede {
  margin: 9px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 62ch;
}

.iwmi-wb-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.iwmi-wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--navy);
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease;
}

.iwmi-wb-btn:hover {
  background: var(--navy-hover);
  color: #fff;
  text-decoration: none;
}

.iwmi-wb-btn.ghost {
  background: var(--surface);
  border: 1px solid var(--field-border);
  color: var(--navy);
}

.iwmi-wb-btn.ghost:hover {
  background: var(--blue-soft);
}

.iwmi-wb-btn:disabled {
  background: var(--field-border);
  color: var(--ink-4);
  cursor: not-allowed;
}

/* Hairline between the action button and the sort control, as in the mock. */
.iwmi-wb-vr {
  width: 1px;
  height: 20px;
  background: var(--field-border);
}

.iwmi-wb-sortlabel {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}

select.iwmi-wb-sort {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3ad' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px;
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  padding: 7px 30px 7px 14px;
  cursor: pointer;
  outline: none;
}

select.iwmi-wb-sort:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, 0.25);
}

/* Search pill: the workbench variant of .iwmi-filter-input. */
.iwmi-wb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--field-border);
  flex: 0 1 300px;
  min-width: 150px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.iwmi-wb-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, 0.25);
}

.iwmi-wb-search i {
  font-size: 12px;
  color: var(--ink-4);
}

.iwmi-wb-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: 12.5px;
  font-family: inherit;
  padding: 8px 0;
}

.iwmi-wb-search input::placeholder {
  color: var(--ink-4);
}

/* The workbench puts the search in the masthead, translucent on the navy --
   the third flex child, so upstream's space-between spreads logo | nav | search
   exactly as the mock does. */
.header .iwmi-wb-search {
  background: rgba(255, 255, 255, 0.12);
  border: 0;
}

.header .iwmi-wb-search:focus-within {
  border: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

.header .iwmi-wb-search i {
  color: rgba(255, 255, 255, 0.6);
}

.header .iwmi-wb-search input {
  color: #fff;
}

.header .iwmi-wb-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* "SHOWING n of m" rule. */
.iwmi-wb-showing {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
}

.iwmi-wb-showing .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}

.iwmi-wb-showing .n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.iwmi-wb-showing .rule {
  flex: 1;
  height: 1px;
  background: #e4e5e7;
}

.iwmi-wb-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 28px 28px;
  margin: 0;
  list-style: none;
}

/* --- product card ------------------------------------------------------------ */

.iwmi-wb-card {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 18px 20px;
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(23, 32, 43, 0.04);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.iwmi-wb-card:hover {
  border-color: var(--field-border);
}

.iwmi-wb-card.selected {
  border-color: var(--navy);
  box-shadow: 0 6px 22px rgba(40, 83, 125, 0.13);
}

.iwmi-wb-card[hidden] {
  display: none;
}

.iwmi-wb-card-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.iwmi-wb-card-icon.raster { color: var(--raster-ink); background: rgba(70, 187, 212, 0.12); }
.iwmi-wb-card-icon.vector { color: var(--vector-ink); background: rgba(34, 173, 122, 0.12); }

.iwmi-wb-card-body {
  flex: 1;
  min-width: 0;
}

.iwmi-wb-card-toprow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* The human title. An <a> to the product page, so middle-click and copy-link
   work; card-level click selects instead. #content prefix: see the h1 note. */
#content .iwmi-wb-card h2.iwmi-wb-card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.iwmi-wb-card h2.iwmi-wb-card-title a {
  color: inherit;
}

.iwmi-wb-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

.iwmi-wb-kind.raster { color: var(--raster-ink); background: rgba(70, 187, 212, 0.12); }
.iwmi-wb-kind.vector { color: var(--vector-ink); background: rgba(34, 173, 122, 0.12); }

/* Lifecycle stage, from governance.yaml. Neutral by design: the coloured dot
   carries the stage, so a card with a stage does not out-shout one without. */
.iwmi-wb-stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--page);
  border: 1px solid #e4e5e7;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

.iwmi-wb-stage .dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--blue);
  flex: 0 0 auto;
}

/* Published is settled, QA is the one that wants attention, everything else is
   simply in progress. */
.iwmi-wb-stage .dot.is-publish { background: var(--vector); }
.iwmi-wb-stage .dot.is-qa { background: var(--caveat); }
.iwmi-wb-stage .dot.is-archive { background: var(--ink-4); }

.iwmi-wb-caveat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--caveat-ink);
  background: rgba(232, 105, 51, 0.1);
  border: 1px solid rgba(232, 105, 51, 0.32);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  white-space: nowrap;
}

.iwmi-wb-card-id {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.iwmi-wb-card-summary {
  margin: 9px 0 0;
  font-size: 13px;
  color: #4b5763;
  line-height: 1.6;
  max-width: 74ch;
}

.iwmi-wb-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
  margin-top: 14px;
}

.iwmi-wb-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 28px;
}

.iwmi-wb-fact .k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}

.iwmi-wb-fact .v {
  font-size: 12px;
  color: var(--ink);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.iwmi-wb-card > .chev {
  font-size: 12px;
  color: #b6bcc3;
  margin-top: 6px;
  flex: 0 0 auto;
}

.iwmi-wb-none {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed #d3d6d9;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 13px;
}

/* --- right rail: footprint map + selected product ----------------------------- */

.iwmi-wb-right {
  flex: 0 6 396px;
  min-width: 264px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  overflow: hidden;
}

.iwmi-wb-map-wrap {
  position: relative;
  flex: 0 0 262px;
  background: var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.iwmi-wb-map {
  position: absolute;
  inset: 0;
  background: var(--hairline);
}

.iwmi-wb-map:focus,
.iwmi-wb-map .leaflet-container:focus {
  outline: none;
}

.iwmi-wb-map-label {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 800;             /* above leaflet panes (map controls sit at 800) */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e0e2e4;
  box-shadow: 0 4px 14px rgba(23, 32, 43, 0.1);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
  white-space: nowrap;
}

.iwmi-wb-map-label i {
  font-size: 11px;
  color: var(--navy);
}

.iwmi-wb-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #e0e2e4;
  box-shadow: 0 4px 14px rgba(23, 32, 43, 0.1);
  pointer-events: none;
}

.iwmi-wb-legend div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--ink-body);
}

.iwmi-wb-legend span {
  width: 11px;
  height: 11px;
  border-radius: 2px;
}

.iwmi-wb-legend .raster { background: rgba(70, 187, 212, 0.28); border: 1px solid var(--raster); }
.iwmi-wb-legend .vector { background: rgba(34, 173, 122, 0.24); border: 1px solid var(--vector); }

.iwmi-wb-attrib {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 800;
  font-size: 9px;
  color: #8c949c;
  pointer-events: none;
}

.iwmi-wb-sel {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

#content .iwmi-wb-sel h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.iwmi-wb-sel-id {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-4);
  font-family: var(--font-mono);
  word-break: break-all;
}

.iwmi-wb-sel-use {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.iwmi-wb-sel-actions {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
}

.iwmi-wb-sel-actions .iwmi-wb-btn {
  flex: 1;
  justify-content: center;
}

.iwmi-wb-sel-actions .iwmi-wb-btn.ghost {
  flex: 0 0 auto;
}

.iwmi-wb-caveat-box {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(232, 105, 51, 0.06);
  border: 1px solid rgba(232, 105, 51, 0.28);
}

.iwmi-wb-caveat-box .head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--caveat-ink);
  margin-bottom: 7px;
}

.iwmi-wb-caveat-box p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-body);
  line-height: 1.6;
}

.iwmi-wb-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.iwmi-wb-spec .k {
  font-size: 11.5px;
  color: var(--ink-3);
  flex: 0 0 auto;
}

.iwmi-wb-spec .v {
  font-size: 11.5px;
  color: var(--ink);
  font-family: var(--font-mono);
  text-align: right;
  overflow-wrap: anywhere;
}

/* --- governance panel ------------------------------------------------------ */
/* Lifecycle, role holders and the RACI grid, in the selected-product rail. All
   three render only where governance.yaml declares something -- see that file
   and renderGovernance() for why an empty panel is worse than none. */

.iwmi-wb-life {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

.iwmi-wb-life-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.iwmi-wb-life-step .dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  flex: 0 0 auto;
  box-sizing: border-box;
  background: var(--surface);
  border: 1.5px solid #cfd3d7;
}

.iwmi-wb-life-step .lbl {
  font-size: 9.5px;
  line-height: 1.25;
  color: #b6bcc3;
  font-weight: 500;
  /* Six labels in a 356px rail: let the long ones break rather than overflow. */
  overflow-wrap: anywhere;
}

.iwmi-wb-life-step.is-done .dot {
  background: var(--vector);
  border-color: var(--vector);
}

.iwmi-wb-life-step.is-done .lbl { color: var(--ink-2); }

.iwmi-wb-life-step.is-now .dot {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(40, 83, 125, 0.18);
}

.iwmi-wb-life-step.is-now .lbl {
  color: var(--navy);
  font-weight: 700;
}

.iwmi-wb-people {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.iwmi-wb-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.iwmi-wb-person .av {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  box-sizing: border-box;
}

/* A dashed empty ring, so an unfilled role looks like a gap to close rather
   than a person whose name failed to load. */
.iwmi-wb-person.is-vacant .av {
  background: var(--surface);
  border: 1.5px dashed #cfd3d7;
}

.iwmi-wb-person .who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.iwmi-wb-person .role {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.iwmi-wb-person .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iwmi-wb-person.is-vacant .name {
  color: #b6bcc3;
  font-weight: 500;
  font-style: italic;
}

.iwmi-wb-raci {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iwmi-wb-raci-row {
  display: grid;
  grid-template-columns: minmax(56px, 1.4fr) repeat(4, 1fr);
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 7px;
}

.iwmi-wb-raci-row .st {
  font-size: 11px;
  color: var(--ink-2);
}

/* Role names, wrapped over two lines as in the mock. align-items: end on the
   row keeps a one-line header sitting on the same baseline as a two-line one. */
.iwmi-wb-raci-row.is-head {
  align-items: end;
  padding-bottom: 6px;
}

.iwmi-wb-raci-row.is-head .hd {
  justify-self: center;
  text-align: center;
  font-size: 8.5px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  overflow-wrap: anywhere;
}

/* The product's current stage, tinted to tie the grid to the strip above. */
.iwmi-wb-raci-row.is-now {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px var(--blue-soft-border);
}

.iwmi-wb-raci-row.is-now .st {
  color: var(--navy);
  font-weight: 700;
}

.iwmi-wb-raci-row .c {
  justify-self: center;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.iwmi-wb-raci-row .c.is-R { color: var(--navy); background: rgba(40, 83, 125, 0.1); }
.iwmi-wb-raci-row .c.is-A { color: var(--caveat-ink); background: rgba(232, 105, 51, 0.1); }
.iwmi-wb-raci-row .c.is-C { color: var(--raster-ink); background: rgba(70, 187, 212, 0.12); }
.iwmi-wb-raci-row .c.is-I { color: var(--ink-4); background: transparent; }

/* No name in that role: a letter here would assert a duty nobody holds. */
.iwmi-wb-raci-row .c.is-vacant {
  color: #c6cbd0;
  background: transparent;
}

.iwmi-wb-measurements {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.iwmi-wb-measurements span {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--navy);
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft-border);
  border-radius: 6px;
  padding: 3px 8px;
}

.iwmi-wb-license {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--ink-3);
}

.iwmi-wb-license i {
  font-size: 12px;
  color: var(--vector);
}

/* --- "Add to the cube" modal ------------------------------------------------------ */

body.iwmi-wb-modal-open {
  overflow: hidden;
}

.iwmi-wb-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(23, 32, 43, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.iwmi-wb-overlay[hidden] {
  display: none;
}

.iwmi-wb-modal {
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(23, 32, 43, 0.35);
  overflow: hidden;
}

.iwmi-wb-modal-head {
  flex: 0 0 auto;
  padding: 22px 26px 0;
}

.iwmi-wb-modal-head .row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* #content prefix: see the workbench h1 note. The modal lives outside
   #content (appended to <body>), so plain selectors are enough here. */
.iwmi-wb-modal h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.15;
}

.iwmi-wb-modal-head .sub {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.iwmi-wb-modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--page);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease;
}

.iwmi-wb-modal-close:hover {
  background: #e4e5e7;
}

.iwmi-wb-tabs {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--page);
  width: fit-content;
}

.iwmi-wb-tab {
  padding: 9px 16px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--ink-2);
  transition: background 0.18s ease, color 0.18s ease;
}

.iwmi-wb-tab:hover {
  background: transparent;
  color: var(--ink);
}

.iwmi-wb-tab.on,
.iwmi-wb-tab.on:hover {
  background: var(--navy);
  color: #fff;
}

.iwmi-wb-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 26px 4px;
}

.iwmi-wb-modal-lede {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
}

.iwmi-wb-modal-lede code {
  font-family: var(--font-mono);
  color: var(--navy);
  font-size: 0.92em;
}

.iwmi-wb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  min-width: 0;
}

/* Upstream's base.css uppercases every <label>; the mock's are sentence case. */
.iwmi-wb-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-body);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.iwmi-wb-field label .opt {
  font-weight: 500;
  color: var(--ink-4);
  margin-left: 8px;
}

.iwmi-wb-field .hint {
  font-size: 11px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.iwmi-wb-field .hint.bad {
  color: var(--caveat-ink);
}

.iwmi-wb-field .in {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--field-border);
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.iwmi-wb-field .in.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.iwmi-wb-field .in:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, 0.25);
}

.iwmi-wb-field .in.bad {
  border-color: var(--caveat);
  box-shadow: 0 0 0 3px rgba(232, 105, 51, 0.18);
}

.iwmi-wb-field textarea.in {
  height: 280px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--surface-wash);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}

.iwmi-wb-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.iwmi-wb-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
}

.iwmi-wb-flash[hidden] {
  display: none;
}

.iwmi-wb-flash i {
  font-size: 13px;
  margin-top: 1px;
}

.iwmi-wb-flash code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}

.iwmi-wb-flash.ok {
  background: rgba(34, 173, 122, 0.08);
  border: 1px solid rgba(34, 173, 122, 0.32);
  color: #17605a;
}

.iwmi-wb-flash.ok i {
  color: var(--vector);
}

.iwmi-wb-flash.err {
  background: rgba(232, 105, 51, 0.06);
  border: 1px solid rgba(232, 105, 51, 0.28);
  color: var(--caveat-ink);
}

.iwmi-wb-flash a {
  color: var(--navy);
  font-weight: 600;
}

.iwmi-wb-existing {
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft-border);
  margin-bottom: 18px;
}

.iwmi-wb-existing .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.iwmi-wb-existing .chips span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--navy);
  background: var(--surface);
  border: 1px solid var(--blue-soft-border);
  border-radius: 6px;
  padding: 3px 9px;
}

/* A button that reads as a link: it switches tabs rather than navigating, so it
   must not be an <a> with a fake href, and must not look like a submit either. */
.iwmi-wb-linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  text-decoration: none;
}

.iwmi-wb-linkbtn:hover {
  color: var(--blue);
  text-decoration: underline;
  background: none;
}

/* --- modal: ownership, matrix, notify, edit mode ---------------------------- */

/* Square, so a lone icon does not sit in a pill sized for a word. */
.iwmi-wb-btn.iwmi-wb-iconbtn {
  flex: 0 0 auto;
  width: 38px;
  padding: 0;
  justify-content: center;
}

.iwmi-wb-editchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft-border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  width: fit-content;
}

.iwmi-wb-own {
  margin: 4px 0 18px;
  padding: 16px;
  border-radius: 11px;
  border: 1px solid var(--hairline);
  background: var(--surface-wash);
}

.iwmi-wb-own .own-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.iwmi-wb-own .own-head .iwmi-wb-eyebrow { margin-bottom: 0; }

.iwmi-wb-own .own-stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
}

.iwmi-wb-own .own-lede {
  margin: 9px 0 14px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
}

.iwmi-wb-own .own-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.iwmi-wb-own .own-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 11px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--field-border);
}

.iwmi-wb-own .own-person .av {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  box-sizing: border-box;
}

.iwmi-wb-own .own-person.is-vacant .av {
  background: var(--surface);
  border: 1.5px dashed #cfd3d7;
}

.iwmi-wb-own .own-person .who {
  min-width: 0;
  flex: 1;
}

.iwmi-wb-own .own-person .role {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* The input carries the card's own background: a bordered box inside a
   bordered box reads as two controls. */
.iwmi-wb-own .own-person input.name {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  padding: 1px 0 0;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}

.iwmi-wb-own .own-person input.name::placeholder {
  color: #b6bcc3;
  font-weight: 500;
  font-style: italic;
}

.iwmi-wb-own .own-matrix-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
}

.iwmi-wb-own .own-matrix-head .iwmi-wb-eyebrow { margin-bottom: 0; }

.iwmi-wb-own .own-matrix-head .hint {
  font-size: 10.5px;
  color: var(--ink-4);
}

/* Editable cells are buttons: keyboard reachable, and they say so on hover. */
.iwmi-wb-raci.is-editable .c {
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: box-shadow 0.15s ease;
}

.iwmi-wb-raci.is-editable .c:hover {
  box-shadow: 0 0 0 2px var(--blue-soft-border);
}

/* Set, but nobody in the role yet: dimmed rather than hidden, because the
   letter is still the policy being edited. */
.iwmi-wb-raci.is-editable .c.is-unclaimed {
  opacity: 0.45;
}

.iwmi-wb-notify {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: 11px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft-border);
}

.iwmi-wb-notify .head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
}

.iwmi-wb-notify .head i { font-size: 11px; }

.iwmi-wb-notify .sub {
  margin: 7px 0 11px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.iwmi-wb-notify .rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.iwmi-wb-notify .row {
  display: grid;
  grid-template-columns: 18px 22px minmax(80px, auto) 1fr;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.iwmi-wb-notify .row .l {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.iwmi-wb-notify .row .l.is-R { color: var(--navy); background: rgba(40, 83, 125, 0.1); }
.iwmi-wb-notify .row .l.is-A { color: var(--caveat-ink); background: rgba(232, 105, 51, 0.1); }
.iwmi-wb-notify .row .l.is-C { color: var(--raster-ink); background: rgba(70, 187, 212, 0.12); }
.iwmi-wb-notify .row .l.is-I { color: var(--ink-4); background: var(--surface); }
.iwmi-wb-notify .row .l.is-vacant { color: #c6cbd0; background: transparent; }

.iwmi-wb-notify .row .av {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  box-sizing: border-box;
}

.iwmi-wb-notify .row.is-vacant .av {
  background: var(--surface);
  border: 1.5px dashed #cfd3d7;
}

.iwmi-wb-notify .row .role {
  font-size: 11.5px;
  color: var(--ink-2);
}

.iwmi-wb-notify .row .name {
  font-size: 12px;
  color: var(--navy);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iwmi-wb-notify .row.is-vacant .name {
  color: #b6bcc3;
  font-weight: 500;
  font-style: italic;
}

.iwmi-wb-govout {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: 11px;
  background: rgba(34, 173, 122, 0.06);
  border: 1px solid rgba(34, 173, 122, 0.3);
}

.iwmi-wb-govout .sub {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ink-body);
  line-height: 1.55;
}

.iwmi-wb-govout .sub:last-child { margin: 10px 0 0; }

.iwmi-wb-govout code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--navy);
}

.iwmi-wb-govout textarea.in {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
  background: var(--surface);
  font-size: 12px;
  line-height: 1.5;
}

.iwmi-wb-govout .actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.iwmi-wb-modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 26px;
  border-top: 1px solid var(--hairline);
  background: var(--surface-wash);
}

.iwmi-wb-modal-foot .iwmi-wb-btn.ghost {
  color: var(--ink-2);
}

/* --- responsive: stack the panes ------------------------------------------------ */

@media (max-width: 1100px) {
  body.iwmi-wb-page {
    overflow: auto;
  }

  .iwmi-wb {
    flex-direction: column;
    height: auto;
  }

  .iwmi-wb-left,
  .iwmi-wb-right {
    flex: none;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--hairline);
    overflow: visible;
  }

  /* Filters read as a toolbar when stacked. */
  .iwmi-wb-left {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* The sections have no flex of their own, so they size to content and three
     of them together are wider than a phone viewport -- which is what pushed
     "Catalogue endpoints" off the right edge instead of wrapping. A basis lets
     them wrap; min-width: 0 lets them actually shrink to it. */
  .iwmi-wb-left .iwmi-wb-section {
    border-top: 0;
    flex: 1 1 210px;
    min-width: 0;
  }

  .iwmi-wb-version {
    display: none;
  }

  .iwmi-wb-main {
    overflow: visible;
  }

  .iwmi-wb-right {
    order: 3;
  }

  .iwmi-wb-map-wrap {
    flex-basis: 300px;
    min-height: 300px;
  }
}

@media (max-width: 700px) {
  .iwmi-wb-head,
  .iwmi-wb-list {
    padding-left: 14px;
    padding-right: 14px;
  }

  .iwmi-wb-head h1 {
    font-size: 27px;
  }

  .iwmi-wb-fact {
    padding-right: 18px;
  }

  /* Products first. Stacked, the rail is three full-width sections -- roughly
     600px of filters, endpoints and health above the fold, which buries the
     list the page exists to show. The rail follows the list instead; the
     product search stays reachable in the masthead. Flip these three `order`s
     if filters-before-results matters more than results-before-filters. */
  .iwmi-wb-main {
    order: 1;
  }

  .iwmi-wb-left {
    order: 2;
    border-bottom: 0;
    border-top: 1px solid var(--hairline);
  }

  .iwmi-wb-right {
    order: 3;
  }

  /* A phone does not need a third of the screen of footprint map. */
  .iwmi-wb-map-wrap {
    flex-basis: 220px;
    min-height: 220px;
  }

  /* Gutters, on every other Explorer page too -- 28px of each side is a lot of
     a 375px viewport. */
  #content,
  #breadcrumb,
  header {
    padding-left: 14px;
    padding-right: 14px;
  }

  footer {
    padding: 14px 14px 20px;
  }

  /* .data-table deliberately bleeds 30px past the panel padding, and .panel
     clips it so the bleed reads as an edge-to-edge header row. On a phone that
     same clip silently cuts table columns off, so let the card scroll
     horizontally instead of losing data. overflow-y stays hidden to keep the
     rounded corners clipping. */
  .panel,
  .panel.odd,
  .panel.highlight {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 560px) {
  /* Wrap the nav rather than scroll it. A horizontal scroller with no gradient
     or arrow reads as a rendering bug -- the last item is visibly sliced -- and
     a static fade would lie whenever the items happen to fit. Wrapped, every
     section is reachable without a swipe. The pill radius has to relax with it:
     999px on a two-row box bulges the ends into a stadium. */
  .header #menu-link > ul {
    flex-wrap: wrap;
    overflow-x: visible;
    border-radius: 14px;
    row-gap: 2px;
  }

  /* One section per row: below this a 210px basis puts two side by side and the
     chip rows start wrapping mid-label. */
  .iwmi-wb-left .iwmi-wb-section {
    flex: 1 1 100%;
  }

  #content .iwmi-wb-head h1 {
    font-size: 23px;
  }

  .iwmi-wb-card {
    padding: 14px;
    gap: 12px;
  }

  /* The affordance is the whole card; the chevron only costs width here. */
  .iwmi-wb-card > .chev {
    display: none;
  }

  .iwmi-wb-sel-actions {
    flex-wrap: wrap;
  }

  .iwmi-wb-sel-actions .iwmi-wb-btn.ghost {
    flex: 1 0 auto;
    justify-content: center;
  }

  /* Modal: the two-up field row cannot hold two usable inputs this narrow, and
     28px of overlay padding is most of the remaining width. */
  .iwmi-wb-field-row {
    grid-template-columns: 1fr;
  }

  .iwmi-wb-overlay {
    padding: 12px;
  }

  .iwmi-wb-modal {
    max-height: 94vh;
    border-radius: 13px;
  }

  .iwmi-wb-modal-head {
    padding: 18px 16px 0;
  }

  .iwmi-wb-modal-body {
    padding: 16px 16px 4px;
  }

  .iwmi-wb-modal-foot {
    padding: 14px 16px;
  }

  .iwmi-wb-modal h2 {
    font-size: 21px;
  }

  .iwmi-wb-field textarea.in {
    height: 200px;
  }

  /* The tab rail is `width: fit-content`, so two tabs overflow rather than
     wrap once the modal is this narrow. */
  .iwmi-wb-tabs {
    width: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .iwmi-wb-own .own-people { grid-template-columns: 1fr; }

  /* Role label and name stack rather than each taking half a phone. */
  .iwmi-wb-notify .row { grid-template-columns: 18px 22px 1fr; }
  .iwmi-wb-notify .row .name { grid-column: 3; }
}

/* --- sign-in strip and review queue in the workbench modal ---------------- *
 * The modal used to ask for a shared password in each pane. Identity is now
 * established once, at the top, and the review tab shows what is waiting. */
.iwmi-wb-auth {
  border: 1px solid var(--blue-soft-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--blue-soft);
  color: var(--ink-body);
}
/* One grid for both rows, so the two buttons line up in a column.
 *
 * As two independent flex rows they could not: the email box is wide and the code box
 * is six digits, so Sign in landed 150px left of Email me a code with a ragged gap.
 * `display: contents` puts each row's children straight into this grid.
 *
 * The tracks are explicit. minmax(0, 300px) with max-content beside it resolved to a
 * 69px field and a 524px button -- the field collapsed to its intrinsic minimum while
 * the button stretched to fill. Fixed widths say what is meant.
 */
.iwmi-wb-auth .signin {
  display: grid;
  grid-template-columns: 300px auto;
  gap: 8px;
  align-items: center;
  justify-content: start;
}
.iwmi-wb-auth .signin > .row { display: contents; }
/* The hint is the grid's FIRST child, so without this it occupies cell 1,1 and every
   control after it shifts one place: buttons landed in column one and fields in column
   two, alternating. */
.iwmi-wb-auth .signin > .hint { grid-column: 1 / -1; }
/* Fields fill their track; buttons keep their own width rather than stretching to it. */
.iwmi-wb-auth .signin .in { width: 100%; }
.iwmi-wb-auth .signin .iwmi-wb-btn { justify-self: start; }

.iwmi-wb-auth .who { display: flex; gap: 10px; align-items: baseline; }
.iwmi-wb-auth .who span { font-weight: 600; }
.iwmi-wb-auth .hint { display: block; margin: 0 0 10px; max-width: 62ch; }
/* The code box holds six digits; sizing it for six says so without a label. The
   letter-spacing is for the DIGITS -- applied to the placeholder as well it stretched
   "code from your email" past the end of a 9em box and clipped it. */
.iwmi-wb-auth .signin .row + .row .in {
  width: 11em;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  text-align: center;
}
.iwmi-wb-auth .signin .row + .row .in::placeholder {
  letter-spacing: normal;
  font-family: inherit;
  opacity: .65;
}
/* Both rows are the same shape: a field, then its button, at one height. */
.iwmi-wb-auth .row > .iwmi-wb-btn { min-height: 36px; }
.iwmi-wb-linkbtn {
  background: none; border: 0; padding: 0;
  color: var(--navy);
  text-decoration: underline; cursor: pointer; font: inherit;
}
.iwmi-wb-btn.quiet {
  background: transparent;
  color: var(--navy);
  border: 1px solid currentColor;
}

.iwmi-wb-review { display: flex; flex-direction: column; gap: 10px; }
.iwmi-wb-review-row {
  border: 1px solid var(--blue-soft-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.iwmi-wb-review-row .row { display: flex; gap: 10px; align-items: center; }
.iwmi-wb-review-row .hint { margin: 4px 0 0; }
.iwmi-wb-review-row .row + .row { margin-top: 8px; }
/* Status reads at a glance: waiting, done, refused, broken.
 *
 * A tinted label, NOT an outlined pill. Outlined and rounded, APPROVED looked like a
 * button and invited a click that does nothing -- the status is the outcome, and the
 * only clickable things on a row are Approve and Reject while it is still pending. */
.iwmi-wb-status {
  font-family: var(--font-body);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700;
  padding: 2px 7px; border-radius: 4px; border: 0;
  background: var(--hairline);
  cursor: default;
}
/* One brand colour per state, and four states that cannot be confused: yellow is
 * waiting, green is done, grey is refused, orange is broken. IWMI's palette has no
 * red, and orange doing double duty for "waiting" and "failed" would defeat the
 * point of a label you read at a glance. */
.iwmi-wb-status.pending  { color: var(--wait-ink);   background: #fbf1dc; }
.iwmi-wb-status.applying { color: var(--wait-ink);   background: #fbf1dc; }
.iwmi-wb-status.approved { color: var(--vector-ink); background: #e4f5ee; }
.iwmi-wb-status.rejected { color: var(--ink-2); background: var(--hairline); }
.iwmi-wb-status.failed   { color: var(--caveat-ink); background: #fdeae1; }

/* The sign-in strip is a gate, so it reads as one: an accent edge rather than a
   panel that looks like another form field. */
.iwmi-wb-auth {
  border-left: 3px solid var(--navy);
}
/* The signed-in line reads "Signed in as ...", so it needs no
   decoration; this tick used to sit in front of an empty span
   while signed out. */
.iwmi-wb-auth .who { justify-content: space-between; }
/* Links in a hint have to look like links; the hint colour alone hides them. */
.iwmi-wb-field .hint a {
  color: var(--navy);
  text-decoration: underline;
}

/* The strip's own controls, on the same tokens as every other field in the panel:
 * --field-border at rest, light blue when focused. They were left to the browser's
 * defaults, which is why the email box wore a heavy black focus ring next to a
 * masthead of IWMI navy. */
.iwmi-wb-auth .in {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 0 10px;
  /* border-box, or the explicit height below is ADDED to the padding and border: the
     email box measured 56px against a 38px button, which is why the buttons looked
     wrong -- they were not too big, the field was. */
  box-sizing: border-box;
  height: 36px;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
.iwmi-wb-auth .in:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, .22);
}
.iwmi-wb-auth .in::placeholder { color: #98a2ad; }
/* Sign in and Email me a code are the strip's actions, so they carry the primary
 * button's navy rather than an outline that reads as secondary. */
/* Compact, and square-ish to match the fields beside them.
 *
 * These inherited the modal's primary button: 9x16 padding and a full pill. Next to a
 * 36px input that reads as a slab -- the button ends up the heaviest thing in a strip
 * whose job is one line of housekeeping. Smaller, 6px radius like the inputs, and the
 * weight goes to the field instead. */
.iwmi-wb-auth .iwmi-wb-btn {
  padding: 0 13px;
  height: 36px;
  box-sizing: border-box;
  min-height: 0;
  border-radius: 6px;
  font-size: 12px;
  gap: 6px;
}
/* Every button in the strip, not only the ones built with .quiet -- Sign in carries
 * no such class, so keying on it left that button filled grey by the base rule while
 * its neighbour was navy. Two buttons in one row should not be styled by accident of
 * which class they happened to be constructed with. */
.iwmi-wb-auth .iwmi-wb-btn {
  background: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
}
.iwmi-wb-auth .iwmi-wb-btn:hover:not(:disabled) {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
}
/* Disabled reads as "not yet", not as another filled button: an outline in the field
 * border, on the strip's own background. */
.iwmi-wb-auth .iwmi-wb-btn:disabled {
  background: transparent;
  border-color: var(--field-border);
  color: #9aa3ad;
}
.iwmi-wb-auth .who a { color: var(--navy); }

/* --- the rail as a disclosure, below the three-pane breakpoint ---------------
 *
 * Above 1100px the rail owns a column and the button does not exist visually. Below,
 * the panes stack and the rail lands above the list at roughly 600-800px tall, which
 * buries the products. One row that expands is the difference between a page you can
 * read and one you scroll past. */
.iwmi-wb-railtoggle { display: none; }

@media (max-width: 1100px) {
  .iwmi-wb-railtoggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
  }
  .iwmi-wb-railtoggle:hover { background: var(--blue-soft); }
  .iwmi-wb-railtoggle .count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--navy);
    color: #fff;
    font-size: 11px;
    text-align: center;
  }
  /* A filter that is on says so on the closed row, so a short list is never a
     mystery. */
  .iwmi-wb-railtoggle.on { color: var(--navy); }
  .iwmi-wb-railtoggle::after {
    content: "\203a";
    margin-left: 8px;
    font-size: 15px;
    color: var(--ink-3);
    transition: transform .12s ease;
  }
  .iwmi-wb-left.open > .iwmi-wb-railtoggle::after { transform: rotate(90deg); }

  /* Collapsed: the button is all that shows. */
  .iwmi-wb-left > .iwmi-wb-section { display: none; }
  .iwmi-wb-left.open > .iwmi-wb-section { display: block; }
}

/* --- draggable pane boundaries ----------------------------------------------
 *
 * Modelled on the irrigation viewer's 8px sidebar-resizer: a thin strip between a
 * side pane and the list, with a grip in the middle. Drag to size, double-click to
 * reset, arrow keys to nudge. Only where the panes sit side by side -- stacked, a
 * vertical boundary means nothing. */
.iwmi-wb-resizer { display: none; }

@media (min-width: 1101px) {
  .iwmi-wb-resizer {
    display: block;
    position: relative;
    flex: 0 0 8px;
    align-self: stretch;
    background: var(--surface);
    border-right: 1px solid var(--hairline);
    cursor: col-resize;
    touch-action: none;
  }
  /* The grip itself: what the pointer aims at, and what says "this moves". */
  .iwmi-wb-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 1px;
    width: 4px;
    height: 44px;
    margin-top: -22px;
    border-radius: var(--r-pill);
    background: var(--blue-soft-border);
  }
  .iwmi-wb-resizer:hover::after,
  .iwmi-wb-resizer:focus-visible::after { background: var(--blue); }
  .iwmi-wb-resizer:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

  /* While dragging, nothing else should take the pointer or select text. */
  body.iwmi-wb-dragging { cursor: col-resize; user-select: none; }
  body.iwmi-wb-dragging .iwmi-wb-list,
  body.iwmi-wb-dragging .iwmi-wb-right,
  body.iwmi-wb-dragging .iwmi-wb-left { pointer-events: none; }
}

/* --- draft a definition from a raster ---------------------------------------- */
.iwmi-wb-draft {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--blue-soft-border);
  border-left: 3px solid var(--navy);
  border-radius: 8px;
  background: var(--blue-soft);
}
.iwmi-wb-draft .row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
/* A URL gets the whole row. Sharing it with the name field left about 170px for
   something that is routinely 120 characters, which is a field you cannot read what
   you pasted into. */
.iwmi-wb-draft .row > .in:not(.name) { flex: 1 1 100%; }
.iwmi-wb-draft .hint { display: block; margin: 0 0 10px; max-width: 68ch; }
.iwmi-wb-draft .in {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  background: var(--surface);
}
.iwmi-wb-draft .in:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, .22);
}
.iwmi-wb-draft .iwmi-wb-btn { flex: 0 0 auto; white-space: nowrap; }
.iwmi-wb-draft .iwmi-wb-btn.quiet { background: var(--navy); border: 0; color: #fff; }
.iwmi-wb-draft .iwmi-wb-btn.quiet:hover:not(:disabled) { background: var(--navy-hover); }
.iwmi-wb-draft .iwmi-wb-btn.quiet:disabled { background: var(--hairline); color: #9aa3ad; }
/* What the file said, once it has been read. */
.iwmi-wb-draft .measured {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--navy);
}

/* The name is optional and short; the URL is neither. */
.iwmi-wb-draft .in.name { flex: 0 1 210px; font-family: var(--font-body); }

/* --- the guided builder's fields --------------------------------------------- */
.iwmi-wb-askgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 14px;
  margin: 12px 0 0;
  /* start, not stretch: a grid row is as tall as its tallest help text, and a
     stretched cell made the Licence box twice the height of every other input for no
     reason other than its neighbour's hint wrapping to three lines. */
  align-items: start;
}
.iwmi-wb-ask { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.iwmi-wb-askgrid .iwmi-wb-ask { margin-top: 0; }
.iwmi-wb-ask > label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.iwmi-wb-ask .in {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.iwmi-wb-ask textarea.in { font-family: var(--font-body); resize: vertical; }
.iwmi-wb-ask .in:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(80, 136, 198, .22);
}
/* The help under each field: the reason it is being asked, not a repeat of its name. */
.iwmi-wb-ask > .hint { font-size: 11.5px; color: var(--ink-3); max-width: 60ch; }

/* --- the builder is an offer, reached by a link ------------------------------- */
.iwmi-wb-offer { margin: 0 0 14px; }
.iwmi-wb-offer .linky {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}
.iwmi-wb-offer .linky:hover { color: var(--navy-hover); }