/* Final refinement layer — quiet metadata, compact semantic flags, and native-feeling bottom sheets. */
:root{
  --surface:#111315;
  --surface-raised:#16191c;
  --surface-soft:#0f1113;
  --hairline:rgba(242,240,232,.09);
}

/* Quest metadata should read as hierarchy, not a wall of badges. */
.quest-top{gap:6px;margin-bottom:9px;min-height:24px}
.quest-top>.pill{min-height:24px;padding:4px 8px;background:transparent;border-color:rgba(242,240,232,.1);font-size:8px;letter-spacing:.075em}
.quest-top>.pill.major{color:#ddcb98;border-color:rgba(216,197,142,.22)}
.quest-top>.pill.mini{color:#aec4af;border-color:rgba(159,184,160,.2)}
.meta-row{gap:5px;margin-top:11px}
.meta-row>.pill{padding:4px 7px;border-color:rgba(242,240,232,.07);background:rgba(255,255,255,.015);color:#8f948f;font-size:8px;font-weight:760;letter-spacing:.015em;text-transform:none}
.quest-row{padding:15px 16px}
.quest-title{font-weight:760;letter-spacing:-.012em}
.quest-teaser{color:#929690}

/* Small semantic flags. Every icon explains itself only when asked. */
.micro-tag{
  appearance:none;-webkit-appearance:none;
  width:26px;height:24px;padding:0;
  display:inline-grid;place-items:center;
  border:1px solid rgba(242,240,232,.1);
  border-radius:8px;background:rgba(255,255,255,.018);
  color:#9b9f9a;font:800 10px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  letter-spacing:-.02em;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .1s ease;
}
.micro-tag:active{transform:scale(.94)}
.micro-tag:focus-visible{outline:2px solid rgba(216,197,142,.6);outline-offset:2px}
.micro-tag[aria-expanded="true"]{background:#202326;border-color:rgba(216,197,142,.34);color:#eee9d8}
.micro-tag-sober{color:#c6d7c8;border-color:rgba(159,184,160,.26);background:rgba(159,184,160,.055)}
.micro-tag-repeatable{color:#d0bd83;border-color:rgba(216,197,142,.2)}
.micro-tag-completed,.micro-tag-progress{color:#a9c4ad;border-color:rgba(159,184,160,.18)}
.micro-tag-failed,.micro-tag-blacklisted{color:#cf9c9c;border-color:rgba(207,128,128,.18)}
.micro-tag-legendary{color:#d9c68d;border-color:rgba(216,197,142,.22)}
.micro-tag-modifier,.micro-tag-retired{color:#aab5c4;border-color:rgba(167,182,203,.18)}
.tag-popover{
  position:fixed;z-index:180;width:max-content;max-width:min(236px,calc(100vw - 24px));
  padding:10px 11px;border:1px solid rgba(242,240,232,.13);border-radius:11px;
  background:rgba(24,27,30,.98);box-shadow:0 14px 42px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:#eeeae0;pointer-events:auto;
}
.tag-popover:before{content:"";position:absolute;top:-4px;left:calc(50% - 4px);width:8px;height:8px;transform:rotate(45deg);background:#181b1e;border-left:1px solid rgba(242,240,232,.11);border-top:1px solid rgba(242,240,232,.11)}
.tag-popover strong{display:block;font-size:11px;font-weight:760;letter-spacing:.01em}
.tag-popover span{display:block;margin-top:3px;color:#a5a9a3;font-size:10px;line-height:1.4;font-weight:500}

/* Forms: keep binary quest properties visually compact. */
.quest-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 15px}
.quest-options .check-row{margin:0;padding:10px 11px;border:1px solid var(--hairline);border-radius:11px;background:#0f1113;color:#b8bbb5;font-size:12px}
.quest-options .check-row input{width:17px;height:17px}

/* Bottom sheets: the visible grabber represents a generous, fixed drag target. */
.modal-backdrop{overscroll-behavior:none;touch-action:none}
.modal{
  padding-top:0;
  scrollbar-width:none;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal::-webkit-scrollbar{display:none}
.modal-drag-zone{
  position:sticky;top:0;z-index:12;
  height:50px;margin:0 -16px 1px;
  display:grid;place-items:center;
  background:linear-gradient(to bottom,#111315 0,#111315 70%,rgba(17,19,21,.88) 83%,rgba(17,19,21,0) 100%);
  touch-action:none;overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
  cursor:grab;-webkit-tap-highlight-color:transparent;
}
.modal-drag-zone:active{cursor:grabbing}
.modal-drag-zone:focus-visible{outline:0}
.modal-drag-zone:focus-visible .modal-grab{background:#969b96;width:48px}
.modal-grab{
  width:42px!important;height:5px!important;margin:0!important;
  border-radius:999px!important;background:#555b5b!important;
  position:static!important;pointer-events:none!important;
  transition:width .14s ease,background .14s ease!important;
}
.modal-grab:before{display:none!important}
.modal.dragging .modal-grab{width:48px!important;background:#838884!important}
.modal-head{padding-top:0}
.modal-head>div:first-child{min-width:0}
.close-btn{width:36px;height:36px;border-radius:10px;font-size:20px;font-weight:400;color:#d8d8d3;background:#17191b;border-color:rgba(242,240,232,.09)}
.detail-grid{gap:7px}
.detail-box{border-radius:12px;background:rgba(255,255,255,.016);border-color:rgba(242,240,232,.075)}
.detail-section{margin-top:20px;padding-top:1px}
.detail-section h3{font-size:9px;letter-spacing:.14em;color:#bcae84}
.choice{border-radius:12px;background:#0f1113;border-color:rgba(242,240,232,.08);padding:12px 13px}
.choice small{font-size:10px}

/* Filter chips stay deliberately understated until selected. */
.filter-row{gap:6px;padding-top:9px}
.filter{padding:7px 10px;background:transparent;border-color:rgba(242,240,232,.075);color:#8f938e;font-size:10px}
.filter.active{background:#d8c58e;color:#11120f;border-color:#d8c58e}

@media(max-width:620px){
  .quest-row{padding:14px}
  .modal-drag-zone{height:54px}
  .tag-popover{max-width:min(224px,calc(100vw - 24px))}
}
@media(max-width:390px){
  .quest-options{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .micro-tag,.modal-grab{transition:none!important}
}