/* The Extension Desk entry, above the feed.
   Its own file so the existing sheets stay untouched. */

.desk-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 14px;
}

/* the lead card — the desk comes before the crowd */
.desk-lead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 16px 17px 15px;
  border-radius: 20px;
  text-decoration: none;
  color: #F4FBF1;
  background:
    radial-gradient(circle at 88% -30%, rgba(255, 255, 255, .30), transparent 52%),
    radial-gradient(circle at 4% 120%, rgba(0, 0, 0, .22), transparent 55%),
    linear-gradient(135deg, #17A369 0%, #0E7A4A 52%, #094E30 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .34) inset,
    0 -1px 0 rgba(0, 0, 0, .18) inset,
    0 16px 30px -20px rgba(9, 78, 48, 1);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .18s ease;
}
.desk-lead:active { transform: scale(.988); }
.desk-lead::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.desk-lead::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, .10) 72%, transparent 88%);
  pointer-events: none;
}

.desk-ic {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
}
.desk-ic svg { width: 21px; height: 21px; color: #F4FBF1; }

.desk-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.desk-txt b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.desk-txt i {
  font-style: normal; font-size: 11.5px; line-height: 1.35;
  color: rgba(244, 251, 241, .82);
}

svg.chev {
  margin-left: auto; flex: 0 0 auto;
  width: 30px; height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #F4FBF1;
  opacity: .95;
}

/* three small claims, so the card says what it is without a paragraph */
.desk-tags {
  display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap;
}
.desk-tags em {
  font-style: normal;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2.5px 7px; border-radius: 999px;
  color: rgba(244, 251, 241, .92);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}

/* the second row sits quieter, on paper */
.desk-sub {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-radius: 15px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, #FFFFFF, #FAF6EC);
  border: 1px solid #E6DECB;
  box-shadow: 0 1px 0 #FFFFFF inset, 0 8px 18px -18px rgba(16, 35, 27, .9);
  transition: transform .12s ease;
}
.desk-sub:active { transform: scale(.99); }
.desk-sub .desk-ic {
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(14, 122, 74, .09);
  border-color: rgba(14, 122, 74, .16);
}
.desk-sub .desk-ic svg { width: 17px; height: 17px; color: #0E7A4A; }
.desk-sub .desk-txt b { font-family: inherit; font-size: 13.5px; font-weight: 650; color: #16241C; }
.desk-sub .desk-txt i { font-size: 11px; color: #6B7C6F; }

/* ------------------------------------------- the dictionary inside the language list */
.lang-dict {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 13px;
  border-radius: 14px;
  text-decoration: none;
  color: #4A3305;
  background: linear-gradient(135deg, #FFF9E8, #FBEFD2);
  border: 1px solid #E4CFA0;
  box-shadow: 0 1px 0 #FFFFFF inset, 0 10px 20px -18px rgba(154, 111, 42, .95);
}
.lang-dict > span:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lang-dict b {
  font-size: 14px; font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  color: #4A3305;
}
.lang-dict .tiny { color: #7A6234 !important; font-size: 10.5px !important; }
.lang-dict svg { margin-left: auto; width: 18px; height: 18px; color: #8A6A22; flex: 0 0 auto; }

/* ------------------------------------------------------- the bottom bar, gently */
.tabbar { padding-top: 6px; }
.tabbar > * {
  border-radius: 12px;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
.tabbar > *:active { transform: translateY(1px); }
.tabbar > *:last-child { position: relative; font-weight: 600; }
.tabbar > *:last-child::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #C9A24A;
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .desk-lead, .desk-sub, .tabbar > * { transition: none; }
}