/* public/line-photo.css
   The ONE line photo slot (price book redesign PR 4, Richard 2026-10-18).
   Drawn by public/line-photo.js thumbHtml on every line row: the staff
   estimate and job pages (web and phone), the phone line items screen, the
   customer's estimate, present mode and the pay page. One file, so the web
   and the phone cannot drift. Tokens only (design-system.css), both themes.

   A slot is 44px square (the touch target size): the photo cropped square,
   or a neutral tile with the line's Type icon when the item has no photo. */

.ht-line-thumb {
  --ht-line-thumb-size: 44px;
  box-sizing: border-box;
  width: var(--ht-line-thumb-size);
  height: var(--ht-line-thumb-size);
  min-width: var(--ht-line-thumb-size);
  flex: 0 0 var(--ht-line-thumb-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-3);
  vertical-align: top;
  line-height: 0;
}
.ht-line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ht-line-thumb svg { width: 20px; height: 20px; }
.ht-line-thumb.is-empty { color: var(--ink-3); }
.ht-line-thumb.kind-discount { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

button.ht-line-thumb {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: zoom-in;
}
button.ht-line-thumb:hover { border-color: var(--border); }
button.ht-line-thumb:focus-visible { outline: 2px solid var(--brand-royal); outline-offset: 2px; }

/* A table cell that holds only the slot (customer estimate, PDF-like lists). */
.ht-line-thumb-cell { width: 56px; padding-right: var(--s-2); vertical-align: top; }

/* ── Where the slot sits in each row ─────────────────────────────────────── */
/* Web staff estimate and job rows: the slot beside the name and description. */
.ht-line-thumb-row { display: flex; align-items: flex-start; gap: var(--s-3); }
.ht-line-thumb-row > .ht-line-thumb { margin-top: 2px; }
.ht-line-thumb-row > .ht-line-thumb-main { flex: 1; min-width: 0; }
/* Phone estimate (.opt-line) and job (.line-item) rows, the phone line items
   screen (.m-lie-row) and the web line editor (.ht-li-head). */
.opt-line > .ht-line-thumb { margin-right: var(--s-3); align-self: center; }
.line-item > .ht-line-thumb { align-self: flex-start; }
.m-lie-row > .ht-line-thumb { align-self: flex-start; }
/* Present mode (public/p/estimate-present.js): the slot replaces the dot. */
.pres-line.has-thumb::before { display: none; }
.pres-line > .ht-line-thumb { margin-right: var(--s-1); }
/* Pay page invoice detail (public/pay/pay.js). */
details.line-items .item.has-thumb { display: flex; align-items: flex-start; gap: var(--s-3); }
details.line-items .item.has-thumb > .item-main { flex: 1; min-width: 0; }
.ht-li-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.ht-li-head > .ht-li-name, .ht-li-head > .ht-li-name-ro { flex: 1; min-width: 0; }

/* ── The viewer (a tap on a photo) ───────────────────────────────────────── */
.ht-line-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  /* The design system's dialog scrim colour (.ds-dialog-backdrop), darker:
     a photo reads better on a dim room. */
  background: rgba(14, 27, 51, 0.82);
}
.ht-line-photo-viewer[hidden] { display: none; }
.ht-line-photo-viewer-box {
  position: relative;
  max-width: min(960px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
.ht-line-photo-viewer-box img {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-lg);
}
.ht-line-photo-viewer-name:empty { display: none; }
.ht-line-photo-viewer-name {
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--r-full);
  padding: 4px var(--s-3);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}
.ht-line-photo-viewer-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--sh-md);
}
.ht-line-photo-viewer-close svg { width: 20px; height: 20px; }
.ht-line-photo-viewer-close:focus-visible { outline: 2px solid var(--brand-royal); outline-offset: 2px; }