/* Styles for the free tools on listing-camera.com (shared with guides.css tokens) */
.x-tool { display: grid; gap: 18px; max-width: 880px; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-l); background: var(--fill-tertiary); }
.x-tool__privacy { font-size: var(--size-body); }
.x-tool__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.x-field { display: grid; gap: 6px; font: var(--type-label); }
.x-field[hidden] { display: none; }
.x-field input[type="number"], .x-field input[type="text"], .x-field select {
  min-height: var(--tap, 44px);
  padding: 8px 12px;
  border-radius: var(--r-s);
  border: 1px solid var(--stroke-primary);
  background: var(--fill-primary-on);
  color: var(--text-primary);
  font: var(--type-body);
  width: 100%;
}
.x-field input[type="range"] { width: 100%; min-height: var(--tap, 44px); accent-color: var(--fill-primary); }
.x-tool__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.x-btn-strong { background: var(--fill-primary); color: var(--text-primary-on); border-color: var(--fill-primary); }
.x-btn-strong:hover { box-shadow: inset 0 0 0 100px var(--hover-wash-primary-on, rgba(255,255,255,.08)); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
button.btn { cursor: pointer; font: var(--type-label); min-height: 40px; padding-inline: 16px; }

/* Drop zone */
.x-drop { position: relative; display: grid; gap: 6px; place-items: center; text-align: center; padding: 34px 18px; border: 1.5px dashed var(--stroke-primary); border-radius: var(--r-m); background: var(--fill-primary-on); cursor: pointer; }
.x-drop.is-over, .x-drop:hover { border-color: var(--text-secondary); }
.x-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.x-drop:focus-within { outline: 2px solid var(--fill-primary); outline-offset: 3px; }
.x-drop__title { font: var(--type-body-strong); }

/* Resizer results */
.x-rs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.x-rs-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--stroke-secondary); }
.x-rs-row:has(> .x-rs-meta:only-child) { grid-template-columns: minmax(0, 1fr); }
.x-rs-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.x-rs-meta { display: grid; gap: 2px; min-width: 0; }
.x-rs-meta strong { overflow-wrap: anywhere; font: var(--type-body-strong); }
@media (max-width: 520px) { .x-rs-row { grid-template-columns: 56px minmax(0, 1fr); } .x-rs-row .btn { grid-column: 1 / -1; justify-self: start; } .x-rs-thumb { width: 56px; height: 42px; } }

/* Shot-list generator */
.x-checks { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 14px; }
.x-checks legend { font: var(--type-label); color: var(--text-secondary); padding: 0 0 8px; }
.x-checks label, .x-sl-output label { display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 6px 0; cursor: pointer; line-height: 1.4; }
.x-checks input, .x-sl-output input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--fill-primary); }
.x-sl-result { display: grid; gap: 12px; padding-top: 8px; border-top: 1px solid var(--stroke-primary); }
.x-sl-result h2 { font: var(--type-title); }
.x-sl-output { display: grid; gap: 14px; }
.x-sl-section h3 { font: var(--type-body-strong); margin-bottom: 4px; }
.x-sl-section ol { margin: 0; padding-left: 1.6em; }
.x-sl-section li { padding-left: 2px; }
.x-sl-section li::marker { color: var(--text-secondary); font-size: var(--size-small); }
.x-sl-opt { font-style: italic; font-size: var(--size-small); color: var(--text-secondary); white-space: nowrap; }
.x-print-only { display: none; }

/* Tools index cards */
.x-tool-cards .x-cardlink h3 { font: var(--type-heading); }

/* Print: the shot-list generator prints only the list */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .x-print-tool .x-bar, .x-print-tool .x-crumbs, .x-print-tool .x-guide-head, .x-print-tool .foot,
  .x-print-tool .x-more, .x-print-tool #faq, .x-print-tool .x-tool-about, .x-print-tool .x-noprint,
  .x-print-tool .theme-btn { display: none !important; }
  .x-print-tool .page { max-width: none !important; padding: 0 !important; }
  .x-print-tool .section { padding: 0 !important; border: 0 !important; }
  .x-print-tool .x-tool { background: none !important; padding: 0 !important; max-width: none !important; }
  .x-print-tool .x-sl-result { border: 0 !important; padding: 0 !important; display: grid !important; }
  .x-print-tool .x-sl-result h2 { font-size: 18pt !important; }
  .x-print-tool .x-sl-output { columns: 2; column-gap: 24px; display: block !important; font-size: 10pt; }
  .x-print-tool .x-sl-section { break-inside: avoid; margin-bottom: 10pt; }
  .x-print-tool .x-sl-output label { min-height: 0; padding: 2px 0; }
  .x-print-tool .x-sl-output input { -webkit-appearance: none; appearance: none; width: 11pt; height: 11pt; border: 1px solid #000; border-radius: 2px; }
  .x-print-tool .x-sl-opt { color: #444 !important; }
  .x-print-tool .x-print-only { display: block !important; color: #444 !important; }
  @page { margin: 14mm; }
}

/* Listing photo checker */
.x-pc-opts { display: flex; align-items: center; gap: 10px; font: var(--type-label); cursor: pointer; }
.x-pc-opts input { width: 18px; height: 18px; accent-color: var(--fill-primary); }
.x-pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.x-pc-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--stroke-secondary); align-items: start; }
.x-pc-frame { position: relative; line-height: 0; }
.x-pc-img { width: 100%; height: auto; border-radius: 8px; display: block; }
.x-pc-grid { display: none; position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background-image: linear-gradient(to right, rgba(253,214,70,.9) 1px, transparent 1px), linear-gradient(to bottom, rgba(253,214,70,.9) 1px, transparent 1px);
  background-size: 12.5% 100%, 100% 25%; }
.show-grid .x-pc-grid { display: block; }
.x-pc-meta { display: grid; gap: 6px; min-width: 0; }
.x-pc-meta strong { overflow-wrap: anywhere; font: var(--type-body-strong); }
.x-pc-sum { color: var(--text-secondary); margin: 0; }
.x-pc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.x-pc-checks li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.x-pc-ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.is-ok .x-pc-ico { background: #1780F5; color: #fff; }
.is-warn .x-pc-ico { background: #FDD646; color: #111; }
.is-bad .x-pc-ico { background: #E5484D; color: #fff; }
.x-pc-cta[hidden] { display: none; }
@media (max-width: 600px) { .x-pc-row { grid-template-columns: minmax(0, 1fr); } }