/* ---- Extension Desk ------------------------------------------------------ */

.desk-hero { padding: 4px 0 2px; }
.desk-lede { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 46ch; }
.desk-acts { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.desk-acts .btn { flex: 1 1 auto; }

.desk-bar { margin-top: 12px; }

.desk-q { margin-bottom: 12px; }
.desk-q-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.desk-who { font-weight: 650; font-size: 14.5px; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.desk-lang {
  font-size: 11px; font-weight: 650; letter-spacing: .02em; color: var(--green-700);
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.desk-body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; }

.desk-risk {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  background: var(--gold-soft); border-radius: 10px; padding: 9px 11px;
  font-size: 12.5px; line-height: 1.45; color: #6b4b12;
}
.desk-risk svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.desk-a { margin-top: 10px; border-left: 2px solid var(--green-100); padding: 2px 0 2px 11px; }
.desk-a p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.desk-a.pending { border-left-color: var(--gold); }
.desk-a-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.desk-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--green-800); background: var(--green-50); border-radius: 999px; padding: 3px 9px;
}
.desk-badge svg { width: 12px; height: 12px; }
.desk-hold {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650;
  color: #7a5410; background: var(--gold-soft); border-radius: 999px; padding: 3px 9px;
}
.desk-hold svg { width: 12px; height: 12px; }
.desk-held { color: var(--muted); font-style: italic; }

.desk-q-foot { margin-top: 11px; display: flex; justify-content: flex-end; }

/* field library */
.lib-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; text-decoration: none; color: inherit;
}
.lib-t { font-weight: 650; font-size: 14.5px; margin-bottom: 2px; }
.lib-row svg { color: var(--faint); flex: none; }

/* official market-board cells */
/* official cells sit in the same grid as the desk cells, which are only
   74px wide: the source chip goes on its own line so the crop name never
   collides with it, and long figures stay on one line */
.intel-strip .is-row { grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.intel-strip .is-crop { white-space: nowrap; font-size: 10px; letter-spacing: .03em; }
.intel-strip .is-src {
  display: block; width: max-content; margin: 2px 0 0; font-size: 9px; font-weight: 700;
  letter-spacing: .04em; padding: 1px 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .18); color: #f4efdf;
}
.intel-strip .is-price { font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: 14.5px; letter-spacing: -.01em; }
.intel-strip .is-unit { display: block; font-size: 9.5px; opacity: .72; margin-top: 0; white-space: nowrap; }

/* ---- app bar: language switch -------------------------------------------
   The bar carries one job per slot and one shape per action. The language
   switch is the only control with a word in it, so it reads as a pill; the
   rest stay circular and identical. */
.appbar .langbtn {
  width: auto; height: 34px; padding: 0 7px 0 9px; gap: 6px;
  display: inline-flex; align-items: center; border-radius: 999px;
  border: 1px solid #C9DCCC;
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF6EF 100%);
  box-shadow: 0 1px 2px rgba(16, 54, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  color: #12402C; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.appbar .langbtn:active {
  transform: scale(.955);
  background: #E6EFE7;
  box-shadow: 0 0 0 1px rgba(16, 54, 36, .10) inset;
}
.appbar .langbtn .gl { width: 15px; height: 15px; flex: none; opacity: .95; }
.appbar .langbtn .langtag {
  font-size: 10.5px; font-weight: 750; letter-spacing: .08em; line-height: 1;
  font-variant-numeric: tabular-nums; color: #12402C;
}
.appbar .langbtn .cv { width: 12px; height: 12px; flex: none; opacity: .5; }
/* even breathing room between the actions, and the avatar flush to the edge */
.appbar > .iconbtn, .appbar > .langbtn { margin-left: -2px; }
.appbar > .iconbtn + .iconbtn, .appbar > .langbtn + .iconbtn { margin-left: 0; }
.appbar > a[href="#/me"] { margin-left: 2px; }

/* On a 390 px phone the bar has five things to carry; tighten it rather than
   let the avatar hang off the edge. */
@media (max-width: 430px) {
  .appbar { gap: 6px; padding: 0 10px; }
  .appbar .iconbtn:not(.langbtn) { width: 40px; height: 40px; }
  .appbar .langbtn { padding: 0 8px; gap: 5px; }
  .appbar .langbtn .cv { display: none; }
  .appbar-brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .appbar-brand .appbar-title { white-space: nowrap; }
}

/* ======================================================== the top of the app
 * Five things have to share one 60px row: the mark, the name, the language,
 * two counters and the face. Before, each one was sized on its own, so the
 * row read as objects that happened to land beside each other: a tall wordmark
 * with a low country underneath, a fat language pill, three circles at three
 * different weights. It is now one masthead and one quiet action cluster.
 *
 * The masthead takes the free space; the actions keep their own widths and sit
 * tight together, in the order the thumb expects: language, messages, notices,
 * me. Nothing is centred by accident.
 */
.appbar.brand-bar {
  gap: 2px;
  padding: 0 10px 0 12px;
}
.appbar-brand {
  flex: 1 1 auto;
  min-width: 0;
  gap: 9px;
  align-items: center;
}
.appbar-brand .brandmark {
  width: 34px; height: 34px; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(10, 30, 20, .18), 0 6px 12px -10px rgba(10, 30, 20, .9);
}
.appbar-title {
  font-size: 18.5px;
  line-height: 1;
  letter-spacing: -.028em;
}
/* The country is a kicker, not a second title: small caps, spaced, quiet. */
.appbar-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--font);
  font-size: 8.5px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7E8C84;
}
/* one cluster, evenly weighted */
.appbar .langbtn {
  height: 30px;
  padding: 0 8px 0 7px;
  gap: 4px;
  border-color: #D5E3D7;
  box-shadow: none;
  background: #FFFDF7;
}
.appbar .langbtn .gl { width: 13px; height: 13px; }
.appbar .langbtn .langtag { font-size: 9.5px; letter-spacing: .1em; }
.appbar .langbtn .cv { width: 11px; height: 11px; opacity: .45; }
.appbar .iconbtn:not(.langbtn) {
  width: 36px;
  height: 36px;
  color: #3F4E46;
}
.appbar .iconbtn:not(.langbtn) svg { width: 19px; height: 19px; }
.appbar > a[href="#/me"] {
  margin-left: 5px;
  display: flex;
  align-items: center;
}
.appbar > a[href="#/me"] .av,
.appbar .av.sm {
  width: 32px !important;
  height: 32px !important;
  border-width: 0;
  box-shadow: 0 0 0 2px #F6F3EC, 0 0 0 3px #DCE7DE;
  font-size: 11.5px;
}
@media (max-width: 430px) {
  .appbar.brand-bar { gap: 0; padding: 0 9px 0 11px; }
  .appbar-title { font-size: 17.5px; }
  .appbar .iconbtn:not(.langbtn) { width: 34px; height: 34px; }
}
@media (max-width: 360px) {
  .appbar .langbtn .langtag { font-size: 9px; letter-spacing: .06em; }
  .appbar .iconbtn:not(.langbtn) { width: 32px; height: 32px; }
}