/* devopen.css — Paket 3 (2026-10-20): "Cihazında aç" (js/devopen.js) on the UDF / EYP / e-imza pages: the option in
   the instrument's settings column and the viewer below the instrument (a paper sheet with the hard ink shadow, the
   signer / package panels, the document list), plus the print sheet ("Yazdır / PDF olarak kaydet": only the paper).
   KİNETİK rules: 0 radius, 1 px rules, mono caps labels. Document content keeps its own fonts / colours (CSSOM only). */
.dvo { margin: 0 0 16px; padding: 12px; border: 1px solid var(--ink); background: var(--paper); }
.dvo[hidden] { display: none; }
.dvo__k { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.dvo__k .dv__led { background: var(--ok); }
.dvo__d { margin: 8px 0 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); }
.dvo__m { margin: 8px 0 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink); }
.dvo__m.is-bad { padding: 8px 10px; border-inline-start: 3px solid var(--signal-ink); background: var(--paper-2); }
.dvo__b[disabled] { opacity: .45; cursor: not-allowed; }
.dvo__b[aria-busy="true"] { opacity: .7; cursor: progress; }

.dv { max-width: var(--max); margin: 40px auto 0; padding: 0 var(--g); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; scroll-margin-top: calc(var(--hh) + 12px); }
.dv:focus { outline: none; }
.dv__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.dv__k { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.dv__led { display: inline-block; width: 8px; height: 8px; background: var(--ok); flex: none; }
.dv__h { margin: 0; min-width: 0; font: 700 var(--t-h3)/1.2 var(--f-sans); color: var(--ink); overflow-wrap: anywhere; }
.dv__h:focus { outline: none; }   /* tabindex -1: focused only to move screen readers here */
.dv__act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dv__notes { display: grid; gap: 8px; }
.dv__notes[hidden] { display: none; }
.dv__note { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--ink-3); background: var(--paper-2); font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); max-width: 80ch; }
.dv__note.is-bad { border-inline-start-color: var(--signal-ink); color: var(--ink); }
.dv__side { display: grid; gap: 20px; align-content: start; }
.dv__side:empty { display: none; }
.dv__sec { margin: 0; min-width: 0; }
.dv__sk { margin: 0 0 10px; font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.dv__kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: 14px; row-gap: 4px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--rule); background: var(--paper); font-size: 14.5px; line-height: 1.4; }
.dv__kv dt { color: var(--ink-2); font-size: var(--t-meta); }
.dv__kv dt.dv__role { grid-column: 1 / -1; font: 500 12px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.dv__kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.dv__kv dd:empty { display: none; }
.dv__none { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--ink-3); background: var(--paper-2); font-size: var(--t-meta); color: var(--ink-2); }
.dv__dl { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.dv__d { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.dv__dn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: 15px; line-height: 1.4; }
.dv__dn .dv__role { font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.dv__nm { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.dv__sz { font-size: 12.5px; color: var(--ink-3); }
.dv__da { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; font-size: 14px; }
.dv__legal { margin: 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); max-width: 80ch; }
.dv__legal b { color: var(--ink); }
.dv__hint { margin: 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-3); max-width: 80ch; }
.dv__stage { display: grid; gap: 14px; min-width: 0; }
.dv__stage:empty { display: none; }

/* the sheet: A4 proportions, margins as a share of its width (devopen.js), document fonts by default Times 12 pt */
.dv__paper { box-sizing: border-box; width: 100%; max-width: 595.28pt; margin: 0 auto; background: #fff; color: #000; border: 1px solid var(--ink); box-shadow: var(--shadow);
  font: 12pt/1.25 "Times New Roman", Times, serif; overflow-wrap: break-word; overflow-x: auto; }
.dv__paper--land { max-width: 841.89pt; }
.dv__paper--text { padding: 24px; }
.dv__pre { margin: 0; white-space: pre-wrap; font: 13px/1.5 var(--f-code); overflow-wrap: anywhere; }
.dv-p { margin: 0; white-space: pre-wrap; tab-size: 4; min-height: 1.25em; }
.dv-p--empty { white-space: normal; }
.dv-li { display: inline-block; min-width: 1.6em; }
.dv-img { max-width: 100%; height: auto; vertical-align: bottom; }
.dv-t { width: 100%; border-collapse: collapse; margin: 4pt 0; table-layout: fixed; }
.dv-t td { padding: 2pt 4pt; vertical-align: top; border: .5pt solid #000; overflow-wrap: anywhere; }
.dv-t--none td, .dv-t td.dv-td--none { border-color: transparent; }
.dv-t--outer { border: .5pt solid #000; }
.dv-t--outer td { border-color: transparent; }
.dv-th td { font-weight: 700; }
.dv-pb { height: 0; margin: 14pt -1px; border-top: 1px dashed var(--ink-3); }
.dv__hf { color: #222; }
.dv__hf--h { padding-bottom: 8pt; margin-bottom: 12pt; border-bottom: .5pt solid #bbb; }
.dv__hf--f { padding-top: 8pt; margin-top: 12pt; border-top: .5pt solid #bbb; }

@media (min-width: 1024px) {
  .dv { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; }
  .dv__bar, .dv__notes { grid-column: 1 / -1; }
  .dv__stage { grid-column: 1; grid-row: 3; }
  .dv__side { grid-column: 2; grid-row: 3; position: sticky; top: calc(var(--hh) + 16px); }
  .dv:not(:has(.dv__side > *)) .dv__stage { grid-column: 1 / -1; }
}
@media (max-width: 719.98px) {
  .dv { margin-top: 28px; gap: 16px; }
  .dv__bar { grid-template-columns: minmax(0, 1fr); }
  .dv__act { justify-content: flex-start; }
  .dv__act .btn { flex: 1 1 auto; }
  .dv__kv { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .dv__kv dd { margin-bottom: 6px; }
  .dv__paper { box-shadow: var(--shadow-sm); }
}

/* print: only the sheet ("Yazdır / PDF olarak kaydet"); the rest of the page is not printed at all */
@page dvland { size: A4 landscape; }
@media print {
  html.dv-print body > *:not(main), html.dv-print main > *:not(.dv), html.dv-print .dv > *:not(.dv__stage),
  html.dv-print .dv__stage > *:not(.dv__paper) { display: none !important; }
  html.dv-print, html.dv-print body, html.dv-print main, html.dv-print .dv { background: #fff !important; margin: 0 !important; padding: 0 !important; display: block !important; max-width: none !important; }
  html.dv-print .dv__paper { max-width: none; width: auto; border: 0; box-shadow: none; padding: 0 !important; overflow: visible; }
  html.dv-print .dv__paper--land { page: dvland; }
  html.dv-print .dv-pb { border: 0; margin: 0; break-before: page; }
  html.dv-print .dv-t { break-inside: auto; }
  html.dv-print .dv-t tr { break-inside: avoid; }
}
@page { size: A4; margin: 25mm 25mm 25mm 25mm; }