/* idcopy.css (W1, id_copy): the card editor in the chosen-file state (one block per side: crop frame on the photo, fine
   turn, live card preview with masking boxes), the watermark / output options and the result page preview.
   Builds on tool.css + local.css. */
.idc { display: grid; gap: 18px; min-width: 0; }
.idc__slot { border: 1px solid var(--ink); background: var(--paper); min-width: 0; }
.idc__sh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--ink); }
[dir="rtl"] .idc__sh { padding: 8px 14px 8px 8px; }
.idc__sk { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.idc__sk b { font: 600 12.5px/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
html[lang="ar"] .idc__sk b, html[lang="ja"] .idc__sk b { text-transform: none; letter-spacing: 0; }
.idc__fn { font-size: var(--t-meta); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idc__acts { display: flex; gap: 6px; flex: none; }
.idc__b { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--ink); border-radius: var(--r-1); font-size: 14px; font-weight: 560; background: var(--paper); transition: background-color .3s var(--e-out), color .3s var(--e-out); }
.idc__b:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
.idc__b[disabled] { opacity: .4; cursor: default; }
.idc__b .ico { width: 14px; height: 14px; }
.idc__x { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--r-1); }
.idc__x:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.idc__x .ico { width: 16px; height: 16px; }
.idc__x span:empty { display: none; }
.idc__ed { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.idc__crop { position: relative; min-width: 0; min-height: 180px; border-inline-end: 1px solid var(--rule); background: var(--paper-3);
  background-image: linear-gradient(45deg, var(--paper-2) 25%, transparent 25%, transparent 75%, var(--paper-2) 75%), linear-gradient(45deg, var(--paper-2) 25%, transparent 25%, transparent 75%, var(--paper-2) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.idc__cv { display: block; width: 100%; touch-action: none; cursor: move; }
.idc__cv:focus-visible, .idc__card:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: -2px; }
.idc__st { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 15px; font-weight: 560; background: var(--paper-2); }
.idc__slot[data-st="busy"] .idc__st { color: var(--ink-2); }
.motion .idc__slot[data-st="busy"] .idc__st { animation: idcPulse 1.2s var(--e-io) infinite alternate; }
@keyframes idcPulse { to { background: var(--paper-3); } }
.idc__slot[data-st="err"] .idc__st { color: var(--signal-ink); }
.idc__slot[data-st="err"] .idc__st a { color: var(--ink); font-weight: 600; }
.idc__slot:not([data-st="ok"]) .idc__r { opacity: .35; pointer-events: none; }
.idc__r { display: flex; flex-direction: column; gap: 12px; padding: 14px; min-width: 0; }
.idc__fine { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.idc__fine .lfield__l { grid-column: 1 / -1; }
.idc__fine input { width: 100%; accent-color: var(--ink); }
.idc__fine output { font-size: 14px; min-width: 4.5ch; text-align: end; }
.idc__cardw { background: #fff; box-shadow: 5px 5px 0 var(--ink); border-radius: 3.5% / 5.5%; overflow: hidden; }
[dir="rtl"] .idc__cardw { box-shadow: -5px 5px 0 var(--ink); }
.idc__card { display: block; width: 100%; touch-action: none; }
.idc__mk { display: flex; flex-wrap: wrap; gap: 8px; }
.idc__addb { justify-self: start; min-height: 48px; }
.idc__hint { margin-top: -4px; }

/* side options */
.idc__wm, .idc__out { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.idc__wm .lfield__i:disabled { opacity: .45; }
.idc__wmx { font-family: var(--f-code); font-size: 13px; color: var(--ink-2); min-height: 1.4em; }
.idc__wmx:empty { display: none; }
.idc__off { border-inline-start-color: var(--signal); margin: 0; }
.idc__legal { margin: 4px 0 0; border-inline-start-color: var(--ink); }

/* result */
.idc__res { margin: 0 0 14px; max-width: 240px; background: #fff; box-shadow: 5px 5px 0 var(--ink); }
[dir="rtl"] .idc__res { box-shadow: -5px 5px 0 var(--ink); }
.idc__res img { display: block; width: 100%; height: auto; }

@media (max-width: 1199.98px) {
  .idc__ed { grid-template-columns: minmax(0, 1fr); }
  .idc__crop { border-inline-end: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 719.98px) {
  .idc__sh { padding-inline-start: 10px; }
  .idc__r { padding: 12px; }
  .idc__res { max-width: 180px; }
}