.drawer { width: 320px; max-width: 100%; height: auto; margin: 4px auto 0; filter: drop-shadow(0 10px 8px rgb(29 28 26 / .18)); }
.cards { margin-top: 8px; }
.tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: relative; z-index: 3; }
.tablist a {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 8px; text-align: center; text-decoration: none;
  background: var(--manila) var(--tex-manila) 0 0 / 256px; color: var(--ink); border: 1px solid var(--manila-deep); border-bottom: 0;
  font: 700 14px/18px var(--font-typed);
  transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease;
}
.tablist a[aria-selected="false"]:active { background-color: var(--manila-deep); }
@media (hover: hover) and (pointer: fine) { .tablist a[aria-selected="false"]:hover { background-color: #E2C589; } }
.tablist a[aria-selected="true"] { background: var(--bond) var(--tex-bond) 0 0 / 256px; color: var(--carbon); box-shadow: inset 0 4px 0 var(--carbon); }
.panels { border: 1px solid var(--manila-deep); background: var(--manila) var(--tex-manila) 0 0 / 512px; padding: 10px 6px 12px; margin-top: -1px; box-shadow: inset 0 2px 6px rgb(29 28 26 / .12); }
.panel + .panel { margin-top: 28px; }
.js .panels { display: grid; }
.panel { position: relative; display: flex; flex-direction: column; }
.panel .carbon-set { flex: 1; }
.js .panel { grid-area: 1 / 1; min-width: 0; margin: 0; }
.js .panel:not([data-active]) { visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity 140ms ease, transform 140ms var(--ease-feed), visibility 0s 140ms; }
.js .panel[data-active] { opacity: 1; transform: none; transition: opacity 220ms ease 60ms, transform 220ms var(--ease-feed) 60ms, visibility 0s; }
.js .panel[data-enter] { opacity: 0; transform: translateY(16px); transition: none; }

.card-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid var(--carbon); font: 600 12px/16px var(--font-printed); letter-spacing: .08em; text-transform: uppercase; color: var(--carbon); }
.card-head .region { white-space: nowrap; }
.plate { margin-top: 12px; padding: 7px 10px 8px; border: 1px solid var(--stamp); font: 400 15px/21px var(--font-typed); }
.plate b { display: block; color: var(--stamp); font: 600 12px/16px var(--font-printed); letter-spacing: .08em; text-transform: uppercase; }
.fields > div { margin-top: 12px; }
.fields dt { font: 600 13px/16px var(--font-printed); letter-spacing: .08em; text-transform: uppercase; color: var(--carbon); margin-bottom: 2px; }
.fields dd { font-size: 16px; line-height: 24px; }
.fields .say { font-weight: 700; font-size: 18px; line-height: 27px; }
.fields .push { font-style: normal; }
.fields .teeth dt { color: var(--ink-soft); }
.fields .teeth dd { font-size: 14px; line-height: 21px; color: var(--ink-soft); }
.actions { display: grid; gap: 10px; order: -1; margin: 0 4px 12px; }
.copyfb { margin-top: 6px; }
.copyfb textarea { width: 100%; min-height: 110px; padding: 8px; font: 400 15px/22px var(--font-typed); background: var(--bond); color: var(--ink); border: 2px solid var(--carbon); }

@media (min-width: 760px) {
  .drawer { width: 480px; margin-top: 8px; }
  .tablist { grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; }
  .tablist a { min-height: 52px; font-size: 15px; }
  .tablist a:nth-child(2) { min-height: 58px; }
  .tablist a:nth-child(3) { min-height: 64px; }
  .tablist a:nth-child(4) { min-height: 70px; }
  .panels { padding: 20px 20px 22px; }
  .card-head { font-size: 13px; line-height: 18px; }
  .plate { font-size: 16px; line-height: 23px; padding: 8px 12px 9px; }
  .fields dd { font-size: 18px; line-height: 28px; }
  .fields .say { font-size: 21px; line-height: 31px; }
  .actions { grid-template-columns: 1fr 1fr; order: 0; margin: 16px 0 0; }
}