/* =========================================================================
   The ITEM page (session 63) - a gallery on the left, what it shows on the
   right. Loaded after cards.css, whose palette (--t1..--t3, --panel, --line,
   the per-page --accent and --band) and whose marks and buttons it uses; only
   what is new to this page is here.

   Both columns declare their own surface, as every panel on these pages
   does: nothing here may sit on whatever .bg-gradient-circle paints.
   ========================================================================= */

.hb-itempage {
  display: flex; align-items: flex-start; gap: var(--gap); margin-top: 20px;
  font-family: 'Raleway', sans-serif;
}
.hb-itempage [hidden] { display: none !important; }

/* The band here is the breadcrumb and nothing else, so the header takes the
   breadcrumb's height: the site gives .bb-8-header 130px of its picture,
   which on this page held nothing and pushed the item down (Bill). */
.hb-itemhead .bb-8-header { min-height: 0; padding-bottom: 0; }

/* Bootstrap rings every button on :focus - so on a mouse click too, where
   the ring stays on the arrow just pressed. Only a keyboard gets one here. */
.hb-itempage button:focus { outline: none; }
.hb-itempage button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.hb-itempage .hb-gal-arrow:focus-visible { outline-offset: -2px; }

/* ---- the gallery ----
   The stage is a fixed square whatever the picture: the images are of every
   proportion, and a stage that took each one's height would move the
   thumbnails and the page under the pointer on every step. Contained, never
   cropped - on a card a crop is a teaser, here the picture is the subject. */
.hb-gal {
  flex: 0 0 46%; max-width: 46%; background: var(--panel);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  padding: 14px;
}
.hb-gal-stage { position: relative; }
.hb-gal-slide { display: none; margin: 0; }
.hb-gal-slide.hb-on { display: block; }
.hb-gal-pic {
  position: relative; height: 0; padding-bottom: 100%; background: #1f1f1f;
}
.hb-gal-pic img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.hb-gal-pic > i.fas {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #55503a; font-size: 34px;
}
.hb-gal-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  min-height: 20px; margin-top: 8px; font-size: 12px; color: var(--t2);
}
.hb-gal-what {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--accent);
}
.hb-gal-credit { margin-left: auto; font-size: 11px; color: var(--t3); }
.hb-gal-credit p { display: inline; margin: 0; }
.hb-gal-credit a { color: var(--t2); text-decoration: underline; }
.hb-gal-credit a:hover { color: var(--t1); }
.hb-gal-dup { font-size: 11px; color: var(--yellow); }

.hb-gal-arrow {
  position: absolute; top: 0; width: 38px; padding: 0; cursor: pointer;
  /* the square only, not the caption under it */
  height: 0; padding-bottom: 100%; background: none; border: 0; color: var(--t1);
}
.hb-gal-arrow i {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; line-height: 30px; text-align: center;
  font-size: 12px; background: rgba(16,16,16,.74);
  border: 1px solid rgba(255,255,255,.16);
}
.hb-gal-prev { left: 0; }
.hb-gal-next { right: 0; }
.hb-gal-arrow:hover i { border-color: var(--t3); color: var(--accent); }

.hb-gal-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hb-gal-thumb {
  position: relative; width: 58px; height: 58px; padding: 0; cursor: pointer;
  background: #1f1f1f; border: 1px solid var(--line2); color: #55503a;
}
.hb-gal-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.hb-gal-thumb:hover { border-color: var(--t3); }
.hb-gal-thumb.hb-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hb-gal-thumb.hb-dup { opacity: .45; }

/* ---- what it shows ---- */
.hb-info {
  flex: 1 1 auto; min-width: 0; background: var(--panel);
  border: 1px solid var(--line); border-top: 3px solid var(--accent);
  padding: 18px 22px 22px 22px;
}
.hb-info a { color: var(--blue); text-decoration: none; }
.hb-info a:hover { color: var(--t1); text-decoration: underline; }

.hb-info-eyebrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1.6px;
  text-transform: uppercase; min-height: 18px;
}
.hb-info .hb-info-eyebrow a { color: var(--t2); }
.hb-info-eyebrow span { color: var(--accent); font-variant-numeric: tabular-nums; }
.hb-info-name {
  font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 32px;
  line-height: 1.12; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--t1); margin: 6px 0 6px 0;
}
.hb-info-rest { font-size: 14px; line-height: 1.4; color: var(--t2); }

.hb-facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 7px 16px; margin: 16px 0 0 0;
}
.hb-facts dt {
  font-size: 11px; font-weight: 400; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--t3); padding-top: 2px;
}
.hb-facts dd { margin: 0; font-size: 14px; line-height: 1.35; color: var(--t1); }

/* ---- the block that follows the picture ----
   Always here and always this shape: one release reads as a plain block, and
   several add only the count and its two steps to the head. */
.hb-steps { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.hb-steps-head { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.hb-steps-noun {
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--t2);
}
.hb-steps-ctl { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.hb-steps-ctl .hb-modal-nav { font-size: 16px; line-height: 1; }
.hb-steps-count {
  font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1px;
  color: var(--t1); font-variant-numeric: tabular-nums; min-width: 4.2em;
  text-align: center;
}
.hb-step { margin-top: 8px; }
.hb-step-line { display: flex; align-items: center; gap: 10px; }
.hb-step-line .hb-mark { font-size: 10px; padding: 3px 8px; }
.hb-step-year {
  font-family: 'Oswald', sans-serif; font-size: 16px; letter-spacing: 1.2px;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.hb-step-name {
  font-family: 'Oswald', sans-serif; font-size: 20px; line-height: 1.2;
  letter-spacing: 1px; text-transform: uppercase; color: var(--t1);
  margin-top: 10px;
}
.hb-info .hb-step-name a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.hb-info .hb-step-name a:hover { color: var(--blue); text-decoration-color: var(--blue); }
.hb-fact-after { font-family: 'Raleway', sans-serif; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--t3); white-space: nowrap; }
.hb-step-rest { font-size: 13px; line-height: 1.4; color: var(--t2); margin-top: 2px; }
.hb-step .hb-facts { margin-top: 12px; }
.hb-step-all { display: flex; flex-wrap: wrap; gap: 4px; }

/* The move to the other side of the page - the one switch a visitor meets -
   and, quieter, the plain way to a single package's own address. */
.hb-info a.hb-switch {
  display: inline-block; margin-top: 16px; padding: 7px 13px;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--t1);
  background: var(--band); border: 1px solid var(--accent);
}
.hb-info a.hb-switch i { margin-left: 6px; font-size: 11px; color: var(--accent); }
.hb-info a.hb-switch:hover { background: var(--accent); color: #1c1c1c; text-decoration: none; }
.hb-info a.hb-switch:hover i { color: #1c1c1c; }
.hb-info a.hb-more, .hb-cmp a.hb-more { display: block; margin-top: 14px; font-size: 12px; color: var(--t3); text-decoration: underline; }
.hb-info a.hb-more:hover, .hb-cmp a.hb-more:hover { color: var(--t1); }

/* ---- the picture made large (session 64) ----
   Not a second gallery: the stage itself, fixed over the page, so the
   slides, the arrows and the steps behind it are the same ones and stay
   together. item.js only sets .hb-zoomed. Above the navbar (a stacking
   context at 30), where the card modal's veil sits too. */
.hb-gal-pic[data-zoom] { cursor: zoom-in; }
.hb-gal-zoom {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 30px;
  height: 30px; padding: 0; cursor: pointer; font-size: 12px; color: var(--t1);
  background: rgba(16,16,16,.74); border: 1px solid rgba(255,255,255,.16);
}
.hb-gal-zoom:hover { border-color: var(--t3); color: var(--accent); }
.hb-gal-zoom .fa-times, .hb-zoomed .hb-gal-zoom .fa-expand { display: none; }
.hb-zoomed .hb-gal-zoom .fa-times { display: inline-block; }

.hb-zoomed .hb-gal-stage {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900;
  display: flex; flex-direction: column; padding: 24px 60px 14px 60px;
  background: rgba(12,12,12,.95);
}
.hb-zoomed .hb-gal-slide.hb-on {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.hb-zoomed .hb-gal-pic {
  flex: 1 1 auto; min-height: 0; height: auto; padding-bottom: 0;
  background: none; cursor: zoom-out;
}
.hb-zoomed .hb-gal-arrow { width: 60px; height: 100%; padding-bottom: 0; }
.hb-zoomed .hb-gal-zoom { top: 14px; right: 14px; }

/* ---- where to buy (session 66) ----
   The retailers' logos are whatever was uploaded - any shape, any ground -
   so each sits whole in a tile of one height. */
.hb-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hb-info .hb-buy a {
  display: block; height: 38px; padding: 3px; background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}
.hb-info .hb-buy a:hover { border-color: var(--accent); }
.hb-buy img { display: block; height: 100%; width: auto; max-width: 132px; object-fit: contain; border-radius: 3px; }

/* ---- the staff's row and its dialogs (session 66) ---- */
.hb-staff {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 22px; padding-top: 12px; border-top: 1px dashed var(--line);
}
.hb-staff-said {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--t3); margin-right: 4px;
}
.hb-staff .hb-fbtn { font-size: 12px; padding: 4px 10px; color: var(--t2); }
.hb-staff .hb-fbtn i { margin-right: 6px; font-size: 11px; color: var(--t3); }
.hb-form-modal { max-width: 520px; }
.hb-form { display: block; width: 100%; margin: 0; font-size: 13px; color: var(--t2); }
.hb-form-row { width: 100%; display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 0 12px 0; }
.hb-form-row > span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
.hb-form select, .hb-form input[type=file] {
  width: 100%; min-width: 0; padding: 5px 6px; font-size: 13px;
  background: #1f1f1f; color: var(--t1); border: 1px solid var(--line);
}
.hb-form img[data-paste-preview] { display: block; max-width: 100%; max-height: 220px; margin: 0 0 8px 0; }
.hb-form img[data-paste-preview][hidden] { display: none; }
.hb-form-help { font-size: 12px; color: var(--t3); margin: 0 0 14px 0; }
.hb-form-tick { display: block; margin: 0 0 8px 0; color: var(--t1); cursor: pointer; }
.hb-form-tick input { margin-right: 6px; }
.hb-form-said { min-height: 18px; margin: 10px 0 0 0; font-size: 12px; color: #EF5354; }
.hb-form-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.hb-form-foot .hb-fbtn { font-size: 12px; padding: 5px 14px; }
.hb-form-busy { opacity: .6; }
.hb-form-wide { max-width: 860px; }

/* ---- the staff's picture sheet (session 67) ----
   Every picture of the page's gallery as a tile, in groups. A tile that can
   be given a picture is a paste zone: clicked, it holds the focus and is
   ringed; given a picture, the new one lies over the old and the tile takes
   the accent until Save. */
.hb-sheet-group { margin: 0 0 16px 0; }
.hb-sheet-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0 0 8px 0; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.hb-sheet-title { font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: .6px; text-transform: uppercase; color: var(--t1); }
.hb-sheet-note, .hb-sheet-none { font-size: 12px; color: var(--t3); }
.hb-sheet-none { margin: 0; }
.hb-sheet-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.hb-tile {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px;
  background: #1f1f1f; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.hb-tile:focus { outline: none; }
.hb-tile:focus-within { border-color: var(--yellow, #FFD452); box-shadow: 0 0 0 1px var(--yellow, #FFD452); }
.hb-tile:has(.hb-tile-new:not([hidden])) { border-color: var(--accent); background: #2b2b2b; }
.hb-tile-fixed { cursor: default; opacity: .75; }
.hb-tile-pic {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: #161616; border-radius: 4px; overflow: hidden; color: #3c3c3c; font-size: 30px;
}
.hb-tile-pic img { width: 100%; height: 100%; object-fit: contain; }
.hb-tile-pic .hb-tile-new { position: absolute; inset: 0; background: #161616; }
.hb-tile-pic .hb-tile-new[hidden], .hb-tile-clear[hidden] { display: none; }
.hb-tile-clear {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0;
  font-size: 11px; line-height: 20px; color: var(--t1); background: rgba(0, 0, 0, .7);
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.hb-tile-what { font-size: 12px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-tile-note { font-size: 11px; color: var(--t3); }
.hb-tile-said { min-height: 14px; font-size: 11px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-tile-choose { margin: auto 0 0 0; font-size: 11px; padding: 3px 8px; text-align: center; cursor: pointer; }
.hb-sheet-credit { max-width: 420px; margin-top: 4px; }
/* Remove and Make primary are ticks sent with the Save: a tile ticked for
   removal is struck out, one ticked as the primary takes the accent. */
.hb-tile-acts { display: flex; flex-direction: column; gap: 2px; }
.hb-tile-act { margin: 0; font-size: 11px; color: var(--t2); cursor: pointer; white-space: nowrap; }
.hb-tile-act input { margin-right: 4px; vertical-align: -1px; }
.hb-tile:has(.hb-tile-act-remove input:checked) { border-color: #EF5354; }
.hb-tile:has(.hb-tile-act-remove input:checked) .hb-tile-pic img:not(.hb-tile-new) { opacity: .25; }
.hb-tile:has(.hb-tile-act:not(.hb-tile-act-remove) input:checked) { border-color: var(--accent); }
.hb-sheet-share { margin-top: 10px; }
.hb-sheet-share .hb-form-tick { display: inline-block; margin: 0 14px 4px 0; }
.hb-sheet-use { display: inline-block; margin: 0 0 4px 0; font-size: 12px; color: var(--t2); }
.hb-form .hb-sheet-use select { width: auto; margin-left: 4px; }
.hb-sheet-share .hb-form-help { margin: 0; }
.hb-links-row {
  display: grid; grid-template-columns: 11em auto auto minmax(0, 1fr) 30px;
  align-items: center; gap: 10px; margin: 0 0 8px 0;
}
.hb-links-row label { margin: 0; white-space: nowrap; color: var(--t1); cursor: pointer; }
.hb-links-row label:has(input:disabled) { color: var(--t3); opacity: .55; cursor: default; }
.hb-form input[type=text] {
  width: 100%; min-width: 0; padding: 5px 6px; font-size: 13px;
  background: #1f1f1f; color: var(--t1); border: 1px solid var(--line);
}
.hb-links [data-row-add] { margin: 4px 0 14px 0; font-size: 12px; padding: 4px 10px; }
.hb-links [data-row-add] i { margin-right: 6px; font-size: 10px; }
@media (max-width: 700px) {
  .hb-links-row { grid-template-columns: minmax(0, 1fr) auto auto 30px; }
  .hb-links-row input[type=text] { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- Compare (session 64) ----
   The frame is the card modal's. Two squares side by side at any width -
   stacked, they would not be a comparison - and never taller than the
   window leaves room for. */
.hb-cmp-veil:focus { outline: none; }
.hb-cmp-open { padding: 3px 9px; font-size: 12px; color: var(--t2); }
.hb-cmp-open i { margin-right: 6px; color: var(--accent); }
/* Compare inside a line of something else - a fact, a row of a list. */
.hb-cmp-in { padding: 1px 8px; font-size: 11px; }
.hb-facts .hb-cmp-in { margin-left: 8px; vertical-align: 1px; }
.hb-cmp-pair { display: flex; align-items: flex-start; gap: var(--gap); }
.hb-cmp-side { flex: 1 1 0; min-width: 0; margin: 0; }
.hb-cmp .hb-gal-pic { padding-bottom: min(100%, calc(100vh - 290px)); }
.hb-cmp-side figcaption { margin-top: 12px; }
.hb-cmp-name {
  font-family: 'Oswald', sans-serif; font-size: 16px; line-height: 1.25;
  letter-spacing: 1px; text-transform: uppercase; color: var(--t1);
  margin-top: 8px;
}

/* ---- the lists on the right (sessions 64, 66) ----
   A <details> each - the page's steps, a toy's relatives - and all of one
   make (Bill): closed it is one line, open it is every row. It expands and
   collapses; it does not scroll inside itself. */
.hb-acc { margin-top: 16px; border-top: 1px solid var(--line); }
.hb-acc summary {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 0 4px 0;
  cursor: pointer; list-style: none; color: var(--t2);
}
.hb-acc summary::-webkit-details-marker { display: none; }
.hb-acc summary:focus { outline: none; }
.hb-acc summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.hb-acc-title {
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1.6px;
  text-transform: uppercase;
}
.hb-acc-count { font-size: 12px; color: var(--t3); font-variant-numeric: tabular-nums; }
.hb-acc summary > i { margin-left: auto; font-size: 11px; color: var(--t3); }
.hb-acc summary:hover, .hb-acc summary:hover > i { color: var(--t1); }
.hb-acc[open] summary > i { transform: rotate(180deg); }
.hb-acc .hb-rows { margin-top: 6px; }

.hb-rows { border-top: 1px solid var(--line); }
.hb-row {
  display: grid; grid-template-columns: 2.8em minmax(0, 1fr) auto;
  align-items: baseline; gap: 2px 10px; width: 100%; padding: 7px 8px;
  text-align: left; cursor: pointer; background: none; border: 0;
  border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
  color: var(--t2); font-size: 13px; line-height: 1.35;
}
.hb-row:hover { background: #2e2e2e; color: var(--t1); }
.hb-row.hb-on { background: var(--band); border-left-color: var(--accent); color: var(--t1); }
.hb-row-year {
  font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 1px;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
/* The year, then the mark with anything extra at the far end, and the name
   under the mark: a mark is the catalog's word and may be any length. */
.hb-row-year { grid-column: 1; grid-row: 1; }
.hb-row .hb-mark { grid-column: 2; grid-row: 1; justify-self: start; white-space: nowrap; }
.hb-row-extra, .hb-row .hb-cmp-in { grid-column: 3; grid-row: 1; }
/* A row that is not itself a button: its name is a link and it holds one. */
div.hb-row { cursor: default; }
.hb-row-name { grid-column: 2 / -1; grid-row: 2; color: var(--t1); }
/* The toy this one was made from, against the toys made from it. */
.hb-mark-src { border-color: var(--green); color: var(--green); }
.hb-row-name small { display: block; font-size: 12px; color: var(--t3); }
.hb-row-extra { font-size: 12px; color: var(--t3); text-align: right; white-space: nowrap; }

@media (max-width: 860px) {
  .hb-itempage { flex-direction: column; }
  .hb-gal { flex: 0 0 auto; max-width: none; width: 100%; box-sizing: border-box; }
  .hb-info { width: 100%; box-sizing: border-box; }
  .hb-info-name { font-size: 26px; }
}