/* wgf-achv-frame.css - the in-game achievement window (.wgf-achvframe), 1:1 client art.
 *
 * ONE home for "the achievement window rendered exactly the way the client draws it"
 * (owner screenshot audit 2026-08-05, second pass: "it needs to look like the in-game
 * one, we have the 1:1 assets datamined"). Every surface here is composited from the
 * REAL classic AchievementFrame textures extracted from CASC by
 * tools/datamine/extract_achievement_ui.py into assets/ui/achv/:
 *
 *   window frame   uiframeachievementwood 9-slice (already in assets/ui/) over the
 *                  achievementbackground parchment page
 *   category rail  parchment column + category-background button plates, the green
 *                  category-highlight band on the current one
 *   rows           parchment-horizontal banners (desaturated until a logged-in
 *                  character proves the earn), iconframe ring, shields w/ points
 *   summary        progressbar-border bars with the client-green fill, recentheader
 *                  band under the gold section headers, the header points well
 *
 * Used by achievement_app (/achievements/ + /achievements/<cat>/). Scoped under
 * .wgf-achvframe; no other surface is touched. The frame interior is LIGHT parchment
 * exactly like the client window; the page canvas around it stays the site's dark
 * shell, so the window floats on the page the way the client window floats on the
 * world. Earned states are painted by wgf-achv-earned.js for the logged-in character
 * (is-earned class + date); the server never claims an earn it cannot know.
 */

/* ── the window: wood 9-slice frame around the real parchment page ─────────────────── */

.wgf-achvframe {
  position: relative;
  padding: 26px;
  border: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  background:
    url(/assets/ui/achievement-wood-nineslice-cornertopleft.png) top left / 34px auto no-repeat,
    url(/assets/ui/achievement-wood-nineslice-cornertopright.png) top right / 34px auto no-repeat,
    url(/assets/ui/achievement-wood-nineslice-cornerbottomleft.png) bottom left / 34px auto no-repeat,
    url(/assets/ui/achievement-wood-nineslice-cornerbottomright.png) bottom right / 34px auto no-repeat,
    url("/assets/ui/_achievement-wood-nineslice-edgetop.png") top center / auto 34px repeat-x,
    url("/assets/ui/_achievement-wood-nineslice-edgebottom.png") bottom center / auto 34px repeat-x,
    url("/assets/ui/!achievement-wood-nineslice-edgeleft.png") left center / 34px auto repeat-y,
    url("/assets/ui/!achievement-wood-nineslice-edgeright.png") right center / 34px auto repeat-y,
    url(/assets/ui/achv/piece-parchment-page.png) center / 100% 100% no-repeat;
  background-color: #16100a;
}

/* Dark-ink text on the parchment interior - the client's own palette. */
.wgf-achvframe,
.wgf-achvframe p { color: #211505; }

/* ── top strip: title, the points well, search ─────────────────────────────────────── */

.wgf-achvframe__top {
  display: flex;
  align-items: center;
  gap: var(--space-3, 16px);
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(74, 46, 12, 0.35);
}

.wgf-achvframe__titlebox { flex: 1 1 220px; min-width: 0; }

/* The top strip sits on the window art's dark upper vignette (the client's header band
   is dark wood too), so its type is GOLD with ink shadow, exactly like the client. */
.wgf-achvframe .wgf-seo-eyebrow {
  color: #c9a227;
  opacity: 1;
  margin: 0 0 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Compound selector on purpose: .wgf-shell-page h1 sets clamp(34px, 6vw, 68px) and
   out-specifies a lone class, but the client's header band is compact. */
.wgf-achvframe .wgf-achvframe__h1 {
  margin: 0;
  font-family: var(--font-game, inherit);
  font-size: 1.7rem;
  line-height: 1.1;
  color: #ffd100;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* The client's points well: the gold-bordered recessed pill from ui-achievement-header,
   with the tiny shield glyph after the number. */
.wgf-achv-pill {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.wgf-achv-pill span {
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #c9a227;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.wgf-achv-pill b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 132px;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-image: url(/assets/ui/achv/piece-points-well.png) 16 20 16 20 fill / 16px 20px stretch;
  font-family: var(--font-game, inherit);
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 700;
  color: #ffd100;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.wgf-achv-pill b::after {
  content: "";
  width: 20px;
  height: 18px;
  background: url(/assets/ui/achv/piece-tinyshield.png) center / contain no-repeat;
}

.wgf-achvframe__search { flex: 0 1 230px; min-width: 170px; }
.wgf-achvframe__search .rd-find__input {
  width: 100%;
  border-radius: 999px;
  color: #cfc3a5;
  background: rgba(20, 16, 10, 0.92);
  border: 1px solid rgba(60, 40, 14, 0.8);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
.wgf-achvframe__search .rd-find__input::placeholder { color: #8d8267; }
.wgf-achvframe__search .rd-find__input:focus {
  outline: none;
  border-color: #b8892f;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 0 3px rgba(232, 197, 110, 0.25);
}

/* ── two columns: category rail + main pane ────────────────────────────────────────── */

.wgf-achvframe__cols {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* The rail sits on the client's darker parchment column with a thin inset border. */
.wgf-achv-side {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid rgba(46, 30, 10, 0.55);
  box-shadow: inset 0 0 14px rgba(46, 30, 10, 0.35);
  background: url(/assets/ui/achv/piece-parchment-column.png) center / 224px 480px repeat;
}

.wgf-achvframe__main { flex: 1 1 auto; min-width: 0; }

/* ── rail buttons: the real category-background plate, green band when current ─────── */

.wgf-achv-side__btn {
  display: block;
  position: relative;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  font-family: var(--font-game, inherit);
  font-size: 0.82rem;
  text-decoration: none;
  color: #f0c848;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  background: url(/assets/ui/achv/piece-category-button.png) center / 100% 100% no-repeat;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wgf-achv-side__btn:hover,
.wgf-achv-side__btn:focus-visible {
  color: #fff;
  filter: brightness(1.15);
}

/* The current category wears the client's green highlight band inside the plate. */
.wgf-achv-side__btn.is-current {
  color: #ffff9a;
  background:
    url(/assets/ui/achv/piece-category-highlight.png) center / calc(100% - 8px) calc(100% - 8px) no-repeat,
    url(/assets/ui/achv/piece-category-button.png) center / 100% 100% no-repeat;
}
.wgf-achv-side__btn.is-current:hover { filter: none; }

/* Sub-categories of the open tab, indented like the client's expanded list. */
.wgf-achv-side__btn--sub {
  margin-left: 12px;
  font-size: 0.76rem;
  height: 25px;
  line-height: 23px;
}

/* ── the gold section headers on the recentheader band ─────────────────────────────── */

.wgf-achv-goldrule {
  display: block;
  margin: 0 auto 2px;
  padding: 2px 0 3px;
  max-width: 480px;
  font-family: var(--font-game, inherit);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #ffd100;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  background: url(/assets/ui/achv/piece-recentheader.png) center / 100% 100% no-repeat;
}

.wgf-achvframe .rd-section-caption {
  text-align: center;
  margin: 0 0 6px;
  color: #6b4e1e;
}

/* ── Progress-Overview bars: the real bar border, client-green fill ─────────────────── */

.wgf-achv-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 7px 12px;
  margin-top: 8px;
}

.wgf-achv-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  text-decoration: none;
  border: none;
  border-image: url(/assets/ui/achv/piece-progressbar-border.png) 8 10 8 10 fill / 8px 10px stretch;
  overflow: hidden;
}

/* The recessed dark track inside the border, then the green fill over it. */
.wgf-achv-bar::before {
  content: "";
  position: absolute;
  inset: 3px 4px;
  background: linear-gradient(180deg, #17110a, #241a10);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.wgf-achv-bar--total {
  grid-column: 1 / -1;
  height: 30px;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
}

/* The client's green: flat green with a light top bevel (vertex-green statusbar). */
.wgf-achv-bar__fill {
  position: absolute;
  inset: 3px auto 3px 4px;
  max-width: calc(100% - 8px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.02) 45%),
    linear-gradient(180deg, #35a112, #1e6c07);
}

.wgf-achv-bar__name,
.wgf-achv-bar__count {
  position: relative;
  font-family: var(--font-game, inherit);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.wgf-achv-bar__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.82rem;
  color: #ffd100;
}

.wgf-achv-bar__count {
  flex: 0 0 auto;
  margin-left: 0.6rem;
  font-size: 0.8rem;
  color: #f2ead2;
  font-variant-numeric: tabular-nums;
}

.wgf-achv-bar:hover,
.wgf-achv-bar:focus-visible { filter: brightness(1.18); }

/* ── the achievement rows: real parchment banners, iconframe ring, points shield ───── */

.wgf-achv-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}

/* The banner is the texture's bright CENTER band (100% auto keeps the paper scale and
   the baked vignette off-row), exactly how the client letterboxes the same art. */
.wgf-achv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 6px 6px 6px 8px;
  text-decoration: none;
  border: 1px solid rgba(34, 22, 8, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 180, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4);
  background: url(/assets/ui/achv/parchment-horizontal-desaturated.png) center / 100% auto;
}

/* A proven earn flips to the client's warm parchment banner (wgf-achv-earned.js). */
.wgf-achv-row.is-earned {
  background-image: url(/assets/ui/achv/parchment-horizontal.png);
}

.wgf-achv-row:hover,
.wgf-achv-row:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 210, 80, 0.75), 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Icon inside the client's gold ring frame. */
.wgf-achv-row__iconframe {
  flex: 0 0 auto;
  position: relative;
  width: 48px;
  height: 48px;
  background: url(/assets/ui/achv/piece-iconframe.png) center / 100% 100% no-repeat;
}

.wgf-achv-row__iconframe img {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: cover;
}

.wgf-achv-row__body {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wgf-achv-row__title {
  display: block;
  font-family: var(--font-game, inherit);
  font-size: 0.95rem;
  line-height: 1.2;
  color: #211505;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wgf-achv-row__desc {
  display: block;
  margin-top: 1px;
  font-size: 0.76rem;
  line-height: 1.25;
  color: #33250f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The shield block on the right: real shield art, the points number ON the shield,
   the earn date under it (client layout). Desaturated until the earn is proven. */
.wgf-achv-row__pts {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-game, inherit);
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  font-variant-numeric: tabular-nums;
  background: url(/assets/ui/achv/piece-shield-points-desat.png) center / contain no-repeat;
}

.wgf-achv-row.is-earned .wgf-achv-row__pts {
  background-image: url(/assets/ui/achv/piece-shield-points.png);
}

/* Zero-point achievements (Feats of Strength) wear the no-points shield, no number. */
.wgf-achv-row__pts--nopoints {
  background-image: url(/assets/ui/achv/piece-shield-nopoints-desat.png);
}
.wgf-achv-row.is-earned .wgf-achv-row__pts--nopoints {
  background-image: url(/assets/ui/achv/piece-shield-nopoints.png);
}

/* The earn date, painted only when the logged-in character's data proves it. */
.wgf-achv-row__date {
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 0 4px 4px 0;
  min-width: 52px;
  text-align: right;
  font-size: 0.72rem;
  color: #5b3a10;
  font-variant-numeric: tabular-nums;
}
.wgf-achv-row__date:empty { display: none; }

/* ── small screens: rail folds into a wrapping row above the pane ──────────────────── */

@media (max-width: 760px) {
  .wgf-achvframe { padding: 20px 14px; }
  .wgf-achvframe__cols { flex-direction: column; }
  .wgf-achv-side {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .wgf-achv-side__btn { flex: 0 1 auto; min-width: 118px; }
  .wgf-achv-side__btn--sub { margin-left: 0; }
  .wgf-achv-row__body { text-align: left; }
  .wgf-achv-row__desc { white-space: normal; }
}