

.ihsnote {
  position: fixed;
  z-index: 9001;
  max-width: 340px;
  padding: 7px 10px;
  font-size: 12px;
  background: var(--surface, #fff);
  color: var(--ink, #1a1a1a);
  border: 1px solid var(--line, #ADB5BD);
  border-left: 3px solid var(--ink, #1a1a1a);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .45);
}

.ihsnote.err:not([hidden]):not(:empty) { margin: 0; }

.ihsnote { transition: opacity .4s ease; }
.ihsnote.fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ihsnote { transition: none; } }


.ihspanel {
  position: absolute;
  top: 0; left: 0; right: 0;
  
  min-height: 100%;
  z-index: 6;
  background: var(--surface, #fff);
  padding: 0 0 12px;
  animation: ihspanel-in 340ms cubic-bezier(.22, .61, .36, 1);
}
@keyframes ihspanel-in {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ihspanel { animation: none; } }
.ihspanel-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ihspanel-head h2 {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 15px; font-weight: 600; margin: 0;
}

.ihspanel-back {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line, #ADB5BD); border-radius: 6px;
  background: none; position: relative; cursor: pointer;
}
.ihspanel-back::before {
  content: ""; position: absolute; left: 10px; top: 8px;
  width: 7px; height: 7px;
  border-left: 1.5px solid var(--ink, #1a1a1a);
  border-bottom: 1.5px solid var(--ink, #1a1a1a);
  transform: rotate(45deg);
}
.ihspanel-back:hover { background: var(--surface-alt, #f3f3f1); }
.ihspanel h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faint, #8a8f95); margin: 14px 0 4px;
}

.ihspanel-note { margin: 6px 0 0; font-size: 11px; color: var(--ink-faint, #8a8f95); }
.ihspanel-rows { display: flex; flex-direction: column; }
.ihspanel-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line, #ADB5BD);
}
.ihspanel-row label { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.ihspanel-row input, .ihspanel-row select {
  width: 84px; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
  text-align: right; padding: 4px 6px;
  border: 1px solid var(--line, #ADB5BD); background: var(--surface, #fff); color: var(--ink, #1a1a1a);
}
.ihspanel-row select { width: auto; text-align: left; }

.ihspanel > .btn.wide { margin-top: 12px; }
.ihspanel > .btn.wide + .btn.wide { margin-top: 8px; }

.ihspanel > .editnote { margin: 12px 0 0; }
.ihspanel > .editnote + .btn.wide { margin-top: 8px; }
.ihspanel input:disabled, .ihspanel button:disabled, .ihspanel select:disabled { opacity: .5; }


.ihsdlg .tilelabel {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1a1a1a);
  letter-spacing: 0;
  font-variant-numeric: normal;
}
.sheet.gallery .ihsdlg .tilelabel { color: inherit; }


.ihstile-none {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 370 / 862;
  color: var(--ink-faint, #8a8f95); font-size: 11px;
}


.ihsrcfigs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
}

.ihsrcfig { text-align: center; }
.ihsrcfig img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 190px;
}
.ihsrcfig-kerf img { max-height: 96px; }

.ihsrcfig-word {
  display: block;
  padding: 26px 0;
  font-family: var(--font-sans, system-ui), sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
}


.ihsrc-wait {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 2px;
  font-size: 13px;
  color: var(--ink-faint, #666);
}


.ihsdlg-back {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 0 0;
  font: inherit;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
}
.ihsdlg-back:hover { color: #fff; text-decoration: underline; }


.ihsdlg-kerf .tilegrid { grid-template-columns: repeat(2, 1fr); }
.ihsdlg-kerf .tile img { aspect-ratio: 1200 / 516; object-fit: contain; }
.ihsdlg-kerf .ihstile-none { aspect-ratio: 1200 / 516; }

.ihsrc-thick { margin-top: 10px; }


.ihspanel-row .rc-byhand { display: none; font-weight: 600; font-size: 14.5px; white-space: nowrap; color: var(--ink, #1a1a1a); }
html.signed-in .ihspanel-row .rc-byhand { display: inline-block; }
html.signed-in .ihspanel-row:has(.rc-byhand) input { width: 62px; }
