/* The galleries (Chapter Six, session 82). Loaded after cards.css (and, on a
   gallery's page, item.css), whose palette, band, cards and picture gallery
   these pages use; every rule here is the galleries' own (.hb-galler*,
   .hb-gform*). */

/* The band is the control row alone: the header keeps none of its picture's
   130px (as the item page's does). */
.hb-galleries-head .bb-8-header { min-height: 0; padding-bottom: 0; }
.hb-gallery-new i { font-size: 9px; margin-right: 2px; }
.hb-gallery-fact { font-family: 'Raleway', sans-serif; font-size: 12px; color: #1c1c1c; }

/* The list's poster cards have no years to draw: no sparkline row. */
.hb-galleries .hb-spark { display: none; }

/* A gallery's page: the item page's gallery, the page's whole width, the
   stage as tall as the window allows. */
.hb-gallerypage .hb-gal { flex: 1 1 auto; max-width: none; }
.hb-gallerypage .hb-gal-pic { padding-bottom: min(62%, calc(100vh - 290px)); }
.hb-gallerypage .hb-gal-cap { font-size: 13px; }
.hb-gallerypage .hb-gal-label { color: var(--t1); }

/* The create page's form, on the results panel's dark surface. */
.hb-gform { max-width: 760px; font-family: 'Raleway', sans-serif; color: var(--t2); }
.hb-gform-label {
  display: block; margin: 0 0 4px 0; font-family: 'Oswald', sans-serif;
  font-size: 12px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3);
}
.hb-gform-label small { text-transform: none; letter-spacing: 0; font-family: 'Raleway', sans-serif; }
.hb-gform input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 14px;
  background: #1f1f1f; border: 1px solid var(--line); color: var(--t1);
}
.hb-gform input[type="text"]:focus { outline: none; border-color: var(--t3); }
/* The old form's widgets carry Bootstrap's .form-control, white: the file
   input here is plain. */
.hb-gform input[type="file"], .hb-gform input[type="file"].form-control {
  display: block; width: 100%; height: auto; padding: 0; margin-bottom: 8px;
  background: none; border: 0; color: var(--t2); font-size: 12px;
}
.hb-gform-head {
  margin: 20px 0 8px 0; font-family: 'Oswald', sans-serif; font-size: 14px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--t1);
}
.hb-gform-row {
  display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line);
}
.hb-gform-row[hidden] { display: none; }
.hb-gform-preview {
  flex: 0 0 96px; height: 96px; display: flex; align-items: center; justify-content: center;
  background: #1f1f1f; color: #55503a; font-size: 24px;
}
.hb-gform-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hb-gform-preview img[hidden], .hb-gform-preview img:not([hidden]) ~ i { display: none; }

/* A row is a paste zone (paste_image.js): clicked, it holds the focus and a
   pasted picture lands in it - the ring says which row that is. */
.hb-gform-row:focus { outline: none; }
.hb-gform-row:focus, .hb-gform-row:focus-within { border-color: var(--yellow); }
.hb-gform-choose {
  display: inline-block; margin: 0 8px 4px 0; padding: 4px 12px; cursor: pointer;
  font-size: 12px; color: var(--t1); background: #3a3a3a; border: 1px solid var(--line);
}
.hb-gform-choose:hover { border-color: var(--t3); }
.hb-gform-said { font-size: 12px; color: var(--t1); margin-right: 8px; }
.hb-gform-said:empty { display: none; }
.hb-gform-hint { display: inline-block; margin-bottom: 8px; font-size: 11px; color: var(--t3); }
.hb-gform-fields { flex: 1 1 auto; min-width: 0; }
.hb-gform-remove, .hb-gform-add, .hb-gform-submit { cursor: pointer; }
.hb-gform-remove {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  background: none; border: 1px solid var(--line); color: var(--t3);
}
.hb-gform-remove[hidden] { display: none; }
.hb-gform-remove:hover { color: var(--t1); border-color: var(--t3); }
.hb-gform-add {
  padding: 6px 12px; font-size: 12px; background: none;
  border: 1px dashed var(--t3); color: var(--t2);
}
.hb-gform-add:hover { color: var(--t1); border-color: var(--t2); }
.hb-gform-add i { font-size: 10px; margin-right: 3px; }
.hb-gform-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.hb-gform-submit {
  padding: 8px 18px; background: #2196c9; border: 0; color: #fff;
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
}
.hb-gform-submit[disabled] { opacity: .6; cursor: default; }
.hb-gform-note { font-size: 12px; color: var(--t3); }
.hb-gform-err { display: block; margin: 0 0 6px 0; font-size: 12px; color: #EF5354; }
.hb-gform-done, .hb-gform-fail { margin-top: 16px; padding: 10px 12px; color: var(--t1); }
.hb-gform-done { border-left: 3px solid #80AE41; background: rgba(128, 174, 65, .12); }
.hb-gform-fail { border-left: 3px solid #EF5354; background: rgba(239, 83, 84, .12); }
.hb-gform button:focus { outline: none; }
.hb-gform button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }