/* QR code, grind dial (recipe page and form) and recipe details. */
.qrpaper {
  background: #fff9ed;
  padding: 19px;
  border-radius: 20px;
  width: fit-content;
  min-width: 234px;
  min-height: 234px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px auto;
  box-shadow: 0 0 38px #f1cb8c19;
}
.qrpaper img, .qrpaper canvas { display: block; max-width: 210px !important; max-height: 210px !important; }
.qrplaceholder { color: #4b4032; max-width: 180px; text-align: center; font-weight: 700; }

.urlbar {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #635748;
  background: #26231f;
  padding: 9px;
  border-radius: 13px;
  min-width: 0;
}
.urlbar code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0d4a9;
  font-size: 14px;
}

.dial {
  position: relative;
  width: min(100%, 320px);
  max-width: 340px;
  aspect-ratio: 1;
  margin: 12px auto;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.dial:active { cursor: grabbing; }
.dial svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 16px #0009);
  transition: filter .15s;
}
.dial:active svg { filter: drop-shadow(0 18px 20px #000d); }
.dial.readonly { cursor: default; touch-action: auto; }
.dial.readonly:active svg { filter: drop-shadow(0 16px 16px #0009); }
.grinder-name { margin: 0; color: var(--cream); font-weight: 700; text-align: center; }
.dial:focus-visible { outline: 2px solid var(--gold); border-radius: 50%; }

.dialwrap { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 4px; }
.dialwrap .dial { width: 100%; max-width: 340px; }

.controls { display: flex; align-items: center; justify-content: center; gap: 18px; }

.round {
  border: 1px solid #665b4e;
  background: linear-gradient(#35312c, #1a1918);
  color: var(--gold);
  width: 47px;
  height: 47px;
  border-radius: 16px;
  font-size: 27px;
}
.sidebtn { z-index: 1; border-radius: 50%; width: 44px; height: 44px; font-size: 25px; justify-self: center; }

.reading { min-width: 100px; text-align: center; font-size: 24px; font-weight: 800; color: var(--gold); }

.recipe-details {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid #4c4740;
  border-radius: 22px;
  background: #171615;
}
.recipe-details h3 { margin: 0 0 15px; }
.details-photo { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin-bottom: 20px; }

.detailsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.detail { background: #25221e; border: 1px solid #403a32; border-radius: 14px; padding: 13px; }
.detail span { display: block; color: #a99f92; font-size: 12px; }
.detail strong { display: block; color: #f2dfbe; font-size: 17px; margin-top: 3px; }

.pulsechips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pulsechips span { background: #30291e; border: 1px solid #5c4b32; padding: 7px 12px; border-radius: 12px; }

@media (max-width: 750px) {
  .qrpaper { min-width: 214px; min-height: 214px; }
}

@media (max-width: 650px) {
  .detailsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .dialwrap { grid-template-columns: 37px minmax(0, 1fr) 37px; gap: 0; }
  .sidebtn { width: 35px; height: 45px; border-radius: 13px; font-size: 21px; }
}