/* The country switch, and the draft strip under the top bar.
   Kept in a file of its own because the content policy forbids a page from
   growing a <style> element at runtime — which is exactly the trick an
   injected script would use.

   The button takes its colour from wherever it is placed (currentColor), so
   the same markup sits on a dark top bar and on the white banner of the
   business case. The open list is always a white panel. */

.ett-switch {
  position: relative;
  display: inline-block;
  margin-left: auto;
  padding-left: 12px;
  flex-shrink: 0;
  font-family: 'Barlow', -apple-system, sans-serif;
}

.ett-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: 8px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.1;
  cursor: pointer;
  text-align: left;
  opacity: .92;
  transition: opacity .15s ease, background-color .15s ease;
}
.ett-toggle:hover { opacity: 1; background: rgba(127, 127, 127, .14); }
.ett-toggle:focus-visible { outline: 2px solid #1faa6e; outline-offset: 2px; }
.ett-switch.is-open .ett-toggle { background: rgba(127, 127, 127, .18); opacity: 1; }

.ett-flag { font-size: 18px; line-height: 1; }
.ett-label { display: flex; flex-direction: column; gap: 2px; }
.ett-label small {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
  font-weight: 600;
}
.ett-label b {
  font-family: 'Barlow Condensed', 'Barlow', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ett-caret { font-size: 12px; opacity: .8; }

.ett-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1000;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  color: #26231c;
  border: 1px solid #d8d1c2;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
.ett-menu[hidden] { display: none; }

.ett-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  white-space: nowrap;
}
.ett-option:hover, .ett-option:focus-visible { background: #f1ede3; outline: none; }
.ett-option.is-on { background: #e4f5ec; font-weight: 700; }
.ett-option .ett-name { flex: 1; }
.ett-status {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f6653;
  border: 1px solid #d8d1c2;
  border-radius: 4px;
  padding: 1px 5px;
}
.ett-option.is-on .ett-status { border-color: #1faa6e; color: #0d5c3a; }

@media (max-width: 560px) {
  .ett-switch { padding-left: 8px; }
  .ett-toggle { padding: 4px 7px; gap: 5px; }
  .ett-flag { font-size: 16px; }
  .ett-label small { display: none; }
  .ett-label b { font-size: 13px; }
}

@media (max-width: 420px) {
  .ett-label { display: none; }
}

.ett-draft {
  background: #fdf3d8;
  border-bottom: 2px solid #d9b25e;
  color: #4a3c17;
  font-family: 'Barlow', -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 20px;
  text-align: center;
}

.ett-draft strong { color: #6b4e0d; }

/* ---------------------------------------------------- what a litre is made of

   The four blocks a litre of diesel is built from, as one stacked bar and a
   list under it (ETT.fuelMix in shared/country.js, 23 September 2026). Lives
   here rather than in a page because three pages draw it and the content
   policy forbids growing a <style> at runtime.

   Colour carries meaning but never carries it alone: every block is named and
   priced in the list below the bar, so the bar can be ignored entirely. */

.ett-mix { font-family: 'Barlow', -apple-system, sans-serif; }

.ett-mix-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #d8cdb6;
  background: #f4efe4;
}

.ett-mix-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;                 /* a thin block must be allowed to vanish */
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

/* The fuel and getting it to the pump: the part that is not tax. */
.ett-mix-seg.is-product, .ett-mix-key.is-product { background: #b8772a; }
.ett-mix-seg.is-distribution, .ett-mix-key.is-distribution { background: #d4a05c; }
.ett-mix-seg.is-distribution { color: #3d2a10; }
.ett-mix-seg.is-untaxed, .ett-mix-key.is-untaxed { background: #b8772a; }
/* Tax. Darker, because that is how the bar reads at a glance. */
.ett-mix-seg.is-excise, .ett-mix-key.is-excise { background: #26231c; }
.ett-mix-seg.is-vat, .ett-mix-key.is-vat { background: #6b6455; }

.ett-mix-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.ett-mix-list li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
}

.ett-mix-key {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: center;
}

.ett-mix-name { font-weight: 700; flex-shrink: 0; }
.ett-mix-what { color: #736b58; font-size: 13px; }
.ett-mix-val {
  margin-left: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.ett-mix-pct { color: #736b58; font-weight: 600; font-size: 12.5px; }

.ett-mix-sum {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1.5px solid #e4dbc5;
  font-size: 14px;
  line-height: 1.5;
}
.ett-mix-sum b { color: #8a5418; }
.ett-mix-sum .ett-mix-net b { color: #137a4d; }

.ett-mix-src {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #736b58;
}
.ett-mix-src a { color: #137a4d; }
.ett-mix-src b { color: #534c3d; }

@media (max-width: 560px) {
  .ett-mix-list li { flex-wrap: wrap; }
  .ett-mix-what { flex-basis: 100%; padding-left: 22px; }
  .ett-mix-seg { font-size: 11px; }
}