/* ============================================================================
   about-tag.css — THE SPECIMEN'S FULL TAG (about-tag.js), scene 1's 'graded'
   step. The tag IS the drawer's paper tag (.jd-itemtag, junk-drawer.css:
   the manila, the grain, the shadow, the name register, the label and value
   type), so only this page's own parts are here, under .jd-spectag, and the
   rules that let the drawer's own tag stand in for it while it is up
   (.jd-spec-on on the well).

   Round 2 (owner, 2026-10-05): bigger type and a bigger tag; the ratings
   set off as a table (a ruled panel of lighter paper: the five categories,
   a thin rule, the overall grade); the head-to-head last, under a heavy
   rule; and the tag hung from an eyelet in its top, straight under the
   lifted drawing (about-tag.js says why). Round 3 (the critic): the paper
   inside an unclipped hanger so its shadow survives the cut corners, a
   washer round the eyelet, the drawer dimmed while the specimen is up,
   the width capped on a narrow desk drawer, and the phone's total row
   without its gauge.
   ========================================================================== */

/* THE STAND-IN. The drawer's own tag holds the elastic, unseen: a 20px
   square while this tag is up, so the drawer's grommet (its left + 10, its
   top + half its height) is its centre, which about-tag.js lays on this
   tag's eyelet. */
.jd-about .jd-well.jd-spec-on > .jd-itemtag:not(.jd-spectag) {
  visibility: hidden;
  box-sizing: border-box;
  width: 20px; min-width: 0; max-width: none;
  height: 20px; padding: 0;
  overflow: hidden;
}

/* …and the elastic waits for it: the drawer strings it to the stand-in's
   first seat, and about-tag.js moves that to the eyelet a frame later */
.jd-about .jd-well.jd-spec-on:not(.jd-spec-strung) > .jd-rope { visibility: hidden; }
/* with reduced motion the tag comes and goes at once, as the drawing does */
@media (prefers-reduced-motion: reduce) {
  .jd-about .jd-spectag { transition: none; }
}

/* ---- THE TAG -------------------------------------------------------------
   One size, set on the tag, and everything on it in ems of it, so the tag
   keeps its proportions with the drawer: on the desk it is a share of the
   well's width (the well is a size container), the drawings' own unit, and
   never more than 84% of it (a short desk window's drawer is narrow).

   TWO BOXES. The tag (.jd-spectag, the drawer's .jd-itemtag) is only the
   hanger: it carries the drawer's drop-shadow filter, the eyelet and its
   washer, and no paper. The paper is .jd-spectag-paper inside it, with the
   cut top corners; a clip-path on the box that casts the shadow would clip
   the shadow off with the corners, and the tag would lie flat on the pile. */
.jd-about .jd-spectag {
  font-size: clamp(11.5px, 2.75cqw, 15.5px);
  width: min(27.5em, 84cqw);
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  padding: 0;
  background: none; border: 0; box-shadow: none;
  clip-path: none; border-radius: 0;
  /* a label to read, not a handle: it does not drag (the drawer's tag does) */
  cursor: default;
  /* the report card's gauge draws its step ticks in the card's paper; on
     the tag they take the table's (below) */
  --card: #f3e9c8;
  /* the eyelet: its centre's depth, its size, and its washer's */
  --eye-y: 1.12em; --eye-d: 0.95em; --washer: 2.1em;
}
/* the paper: the drawer's manila (junk-drawer.css .jd-itemtag, restated:
   the grain, the sheen, the colour, the pressed edge), hung from its top —
   the corners there cut back, the bottom ones rounded (the drawer's tag
   points its left end instead) */
.jd-about .jd-spectag .jd-spectag-paper {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.29 0 0 0 0 0.21 0 0 0 0 0.09 0 0 0 0.55 -0.42'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(178deg, rgba(255, 250, 228, 0.55) 0%, rgba(255, 250, 228, 0) 22%,
                    rgba(0, 0, 0, 0) 78%, rgba(96, 68, 26, 0.10) 100%),
    #e8d9a8;
  border: 1px solid rgba(74, 53, 18, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 249, 226, 0.28);
  padding: 2.5em 1.25em 1.05em;
  clip-path: polygon(1.5em 0, calc(100% - 1.5em) 0, 100% 1.5em, 100% 100%, 0 100%, 0 1.5em);
  border-radius: 0 0 0.55em 0.55em;
}
/* the eyelet: the drawer's grommet (the same turned metal), moved to the
   top's middle. about-tag.js reads its top and height to string to it. */
.jd-about .jd-spectag::before {
  left: 50%; top: calc(var(--eye-y) - var(--eye-d) / 2);
  width: var(--eye-d); height: var(--eye-d);
  transform: translateX(-50%);
  z-index: 2;
}
/* its washer: a disc of the manila a shade darker, faintly ringed, the
   reinforcement a hung tag wears round its hole */
.jd-about .jd-spectag::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: var(--eye-y);
  width: var(--washer); height: var(--washer);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 86, 32, 0.15) 0 62%, rgba(120, 86, 32, 0.09) 100%);
  box-shadow: 0 0 0 1px rgba(74, 53, 18, 0.2), inset 0 0 0 1px rgba(255, 249, 226, 0.4);
}

/* WHILE THE SPECIMEN IS UP (.jd-spec-up, from the moment it starts to rise
   until its tag comes down): the rest of the drawer steps back, as the
   drawer's own lift dims its pile (junk-drawer.css .jd-has-pick) — the
   picture in its shade (about.css), and the live furniture on it, the lit
   Take-a-Turn button above all, in the pile's brightness(.68) */
html.jd-poster-on:not(.jd-drawer-awake) .jd-about .jd-well.jd-spec-up::before { opacity: 1; }
.jd-about .jd-well.jd-spec-up .jd-pile > .jd-item--turn {
  filter: brightness(0.68) saturate(0.8);
  transition: filter 0.25s ease;
}
.jd-about .jd-well.jd-spec-up .jd-pile > .jd-item:not(.jd-item--turn):not(.is-picked) {
  filter: var(--jd-shadow-rest) brightness(0.68) saturate(0.8);
}

/* the name: one specimen, so no two-line reserve (the drawer's tag keeps
   one so its height holds steady from item to item) */
.jd-about .jd-spectag .name {
  min-height: 0;
  font-size: 1.12em; letter-spacing: 0.08em; line-height: 1.35;
  padding-bottom: 0.45em; margin-bottom: 0.55em;
}
/* the model, on its own line under the name, and the day it drew this (the
   drawer's tag files it under MODEL; here the line speaks for itself,
   every word on it from the data) */
.jd-about .jd-spectag .val { font-size: 0.95em; line-height: 1.4; }
.jd-about .jd-spectag .jd-spectag-model {
  display: block;
  margin-bottom: 0.85em;
}
.jd-about .jd-spectag .jd-spectag-date::before {
  content: "\00b7"; margin: 0 0.5em; opacity: 0.6;
}
.jd-about .jd-spectag .jd-spectag-date { opacity: 0.8; }

/* THE TABLE: a panel of lighter paper set into the manila, ruled round in
   ink — the categories in taxonomy order, each a row with its gauge flush
   right (so the gauges stand in one column), dotted pencil lines between
   them, then a thin rule and the overall grade, the table's total row.
   (The value's word is each gauge's tooltip and its accessible text.) */
.jd-about .jd-spectag .jd-spectag-table {
  background:
    linear-gradient(180deg, rgba(255, 253, 244, 0.5), rgba(255, 253, 244, 0) 60%),
    #f3e9c8;
  border: 1px solid rgba(74, 53, 18, 0.55);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(255, 252, 238, 0.55),
              inset 0 1px 3px rgba(74, 53, 18, 0.14);
  padding: 0.3em 0.75em 0.35em;
}
.jd-about .jd-spectag .jd-spectag-row {
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.38em 0;
  min-width: 0;
}
.jd-about .jd-spectag .jd-spectag-row + .jd-spectag-row {
  border-top: 1px dotted rgba(74, 53, 18, 0.32);
}
/* the category names, larger and darker than the drawer's tag's small
   capitals (owner: "a little bit larger and easier to read") */
.jd-about .jd-spectag .jd-spectag-row .lab,
.jd-about .jd-spectag .jd-spectag-h2h .lab {
  flex: 1 1 auto; min-width: 0;
  font-size: 1em; letter-spacing: 0.06em; line-height: 1.3;
  color: rgba(58, 42, 18, 0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jd-about .jd-spectag .jd-spectag-gauge { flex: 0 0 auto; display: flex; align-items: center; }
.jd-about .jd-spectag .rc-bar {
  width: 4.4em; height: 0.78em;
  border-width: 0.13em; border-radius: 0.17em;
}
.jd-about .jd-spectag .rc-bar-tick { width: 0.13em; }
.jd-about .jd-spectag .jd-spectag-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.jd-about .jd-spectag .jd-spectag-rule {
  display: block; height: 0;
  border-top: 1px solid rgba(58, 42, 18, 0.55);
  margin: 0.1em 0 0;
}
/* the total row: its name a little heavier, its grade's word in the values'
   type, a size up, then its gauge in the gauges' column */
.jd-about .jd-spectag .jd-spectag-g { padding-top: 0.45em; }
.jd-about .jd-spectag .jd-spectag-row.jd-spectag-g .lab {
  font-weight: 700; color: #3a2a12;
}
.jd-about .jd-spectag .jd-spectag-g .val.g {
  flex: 0 0 auto;
  font-size: 1.02em; letter-spacing: 0.12em; line-height: 1.3; color: #3a2a12;
}

/* the heavy rule under the table, then where it placed among its four */
.jd-about .jd-spectag .jd-spectag-rule--foot {
  margin: 1.1em 0 0.55em;
  border-top: 2px solid rgba(58, 42, 18, 0.72);
}
.jd-about .jd-spectag .jd-spectag-h2h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.7em;
  padding: 0 0.75em;
}
.jd-about .jd-spectag .jd-spectag-place {
  flex: 0 0 auto;
  font-size: 1.02em; font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; white-space: nowrap;
}

/* ---- THE PHONE: the drawer's small well ---------------------------------
   The well is a third of the desk's (about 210 × 275px at 390 × 844), so the
   tag cannot be a share of it: it takes the 11px the drawer's tag reads at
   there (about.css) and the well's width, and closes up every space it can,
   because each pixel it gives back goes to the lifted drawing above it
   (about-tag.js lifts it as far as the well has room for, up to twice the
   drawer's lift). The model and the day share one line, a size down. */
@media (max-width: 768px), (max-height: 500px) {
  .jd-about .jd-spectag {
    font-size: 11px;
    width: calc(100cqw - 12px); max-width: none;
    --eye-y: 0.78em; --eye-d: 0.85em; --washer: 1.45em;
  }
  .jd-about .jd-spectag .jd-spectag-paper {
    padding: 1.55em 0.55em 0.45em;
    clip-path: polygon(1em 0, calc(100% - 1em) 0, 100% 1em, 100% 100%, 0 100%, 0 1em);
    border-radius: 0 0 0.45em 0.45em;
  }
  .jd-about .jd-spectag .name {
    font-size: 1em; letter-spacing: 0.05em; line-height: 1.25;
    padding: 0 0.3em 0.2em; margin-bottom: 0.25em;
  }
  .jd-about .jd-spectag .val { font-size: 0.95em; line-height: 1.25; letter-spacing: 0.03em; }
  .jd-about .jd-spectag .jd-spectag-model {
    font-size: 10px; letter-spacing: 0; margin-bottom: 0.35em; padding: 0 0.3em;
  }
  .jd-about .jd-spectag .jd-spectag-date::before { margin: 0 0.35em; }
  /* the table's margins inside its rule, taken back from the letter-spacing */
  .jd-about .jd-spectag .jd-spectag-table { padding: 0 0.6em 0.05em; }
  .jd-about .jd-spectag .jd-spectag-row { gap: 0.4em; padding: 0.04em 0; }
  .jd-about .jd-spectag .jd-spectag-row .lab,
  .jd-about .jd-spectag .jd-spectag-h2h .lab { letter-spacing: 0; }
  .jd-about .jd-spectag .rc-bar { width: 3.2em; height: 0.75em; }
  /* THE TOTAL ROW: no room here for its name, its grade's word AND a gauge,
     so the word carries the grade alone (the gauge is the categories'
     language; "Select" is the grade's own), a clear space before it */
  .jd-about .jd-spectag .jd-spectag-g { padding-top: 0.2em; gap: 1em; }
  .jd-about .jd-spectag .jd-spectag-g .jd-spectag-gauge { display: none; }
  .jd-about .jd-spectag .jd-spectag-row.jd-spectag-g .lab {
    font-weight: 400; letter-spacing: 0;
    white-space: normal; overflow: visible; line-height: 1.15;
  }
  .jd-about .jd-spectag .jd-spectag-g .val.g,
  .jd-about .jd-spectag .jd-spectag-place { font-size: 1em; letter-spacing: 0.03em; }
  .jd-about .jd-spectag .jd-spectag-rule--foot { margin: 0.5em 0 0.25em; border-top-width: 1.5px; }
  .jd-about .jd-spectag .jd-spectag-h2h { padding: 0 0.6em; }
}

/* ---- A SMALLER WELL (a small phone, a phone on its side): the drawer
   there is too short for the tag and a lifted drawing above it, so the tag
   closes up — the name on one line, the type a size smaller — and still
   carries every grade. The well is a size container (junk-drawer.css), so
   this asks the well, not the screen. */
@container (max-height: 265px) {
  .jd-about .jd-spectag { font-size: 10px; }
  .jd-about .jd-spectag .name {
    display: block; white-space: nowrap; text-overflow: ellipsis;
  }
  .jd-about .jd-spectag .jd-spectag-paper { padding-top: 1.55em; padding-bottom: 0.4em; }
  .jd-about .jd-spectag .name { padding-bottom: 0.2em; margin-bottom: 0.25em; }
  .jd-about .jd-spectag .jd-spectag-model { margin-bottom: 0.3em; }
  .jd-about .jd-spectag .jd-spectag-row { padding: 0; }
  .jd-about .jd-spectag .jd-spectag-g { padding-top: 0.1em; }
  .jd-about .jd-spectag .jd-spectag-rule--foot { margin: 0.4em 0 0.2em; }
}
/* …and a narrow one (a 360px phone): the names set tight */
@container (max-width: 190px) {
  .jd-about .jd-spectag .jd-spectag-paper { padding-left: 0.45em; padding-right: 0.45em; }
  .jd-about .jd-spectag .jd-spectag-table { padding-left: 0.5em; padding-right: 0.5em; }
  .jd-about .jd-spectag .jd-spectag-row .lab,
  .jd-about .jd-spectag .jd-spectag-h2h .lab { letter-spacing: 0; font-size: 0.95em; }
  .jd-about .jd-spectag .val { letter-spacing: 0; }
}

/* ---- SIDE BY SIDE IN A WIDE DRAWER (the phone's 4:3 drawer, 2026-10-12;
   about-tag.js sideOf): the tag hangs beside the lifted drawing, at 60% of
   the well's width, the name on one line */
.jd-about .jd-well.jd-spec-side .jd-spectag { width: 60cqw; font-size: 10px; }
.jd-about .jd-well.jd-spec-side .jd-spectag .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }