/* pub-preview.css — Publisher → PDF (Beta): the first page + automatic warnings in the result pane (js/pub-preview.js).
   Linked only on that page. Below 1024 px the box wraps to its own full-width line under the result: two columns from
   720 px (the page placed in the first, the notes beside it), one column below that in markup order (warnings, page,
   hint), all before the download button. From 1024 px it stands beside the result instead (see the end of the file).
   The page sits on the instrument like a printed sheet (1 px ink frame, hard ink shadow, no rounding). */
/* the done pane is a row (result + share card): the box wraps to its own full-width line under them */
.pane--done:has(> .pubprev) { flex-wrap: wrap; }
.pubprev { flex: 1 0 100%; min-width: 0; margin-top: 6px; border-top: 1px solid var(--ink); padding-top: 14px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(20px, 3vw, 44px); row-gap: 14px; align-items: start; }
.pubprev[data-o="land"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pubprev[hidden] { display: none; }
.pubprev__fig, .pubprev__np { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
.pubprev__w, .pubprev__ok, .pubprev__hint { grid-column: 2; margin: 0; }
.pubprev__k, .pubprev__wh { margin: 0 0 10px; font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pubprev__k { display: block; }
/* the page opens full size (the same preview URL) in a new tab */
.pubprev__a { display: block; cursor: zoom-in; }
.pubprev__a:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 3px; }
.pubprev__img { display: block; width: auto; height: auto; max-width: calc(100% - 8px); max-height: 70vh; border: 1px solid var(--ink); background: #fff; box-shadow: 8px 8px 0 var(--ink); }
[dir="rtl"] .pubprev__img { box-shadow: -8px 8px 0 var(--ink); }
.pubprev__np { align-self: start; 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); }
.pubprev__wh { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.pubprev__wh .ico { width: 16px; height: 16px; flex: none; color: var(--signal-ink); }
.pubprev__w ul { border-top: 1px solid var(--rule); }
.pubprev__w li, .pubprev__ok { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.pubprev__w li::before, .pubprev__ok::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--signal); transform: translateY(-1px); }
.pubprev__ok { border-top: 1px solid var(--rule); color: var(--ink-2); }
.pubprev__ok::before { background: var(--ok); }
.pubprev__hint { font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 719.98px) {
  .pubprev, .pubprev[data-o="land"] { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pubprev__fig, .pubprev__np, .pubprev__w, .pubprev__ok, .pubprev__hint { grid-column: 1; grid-row: auto; }
  .pubprev__img { max-width: calc(100% - 5px); max-height: 60vh; box-shadow: 5px 5px 0 var(--ink); }
  [dir="rtl"] .pubprev__img { box-shadow: -5px 5px 0 var(--ink); }
  .pubprev__w li, .pubprev__ok { font-size: var(--t-sm); }
  .pubprev__ok { border-top: 0; padding-top: 0; }   /* first in the column: the box's own ink rule is right above it */
}
/* ≥ 1024 px (the instrument in two columns, "Dosyayı İndir" at the top of the side column): the box takes the story
   card's place beside the result, from the top of the pane, so the warnings and the page are on the first screen next
   to the download button (wrapped under the result they began below the fold even at 1440×900). One column inside, in
   markup order. The result keeps a fixed share of the row, so nothing jumps when the box appears. The big story card
   steps aside on this page; the share tile in the side column keeps its own thumbnail. [data-pubprev] only lifts the
   specificity over tool.css / share.css (share.css is loaded later, at SUCCESS). */
@media (min-width: 1024px) {
  .pane--done:has(> .pubprev[data-pubprev]) { flex-wrap: nowrap; align-items: flex-start; }
  .pane--done:has(> .pubprev[data-pubprev]) > .shc { display: none; }
  .pane--done:has(> .pubprev[data-pubprev]) > .res { flex: 0 1 40%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .pane--done:has(> .pubprev[data-pubprev]) .res__num { font-size: clamp(88px, 8.6vw, 150px); }
  .pane--done:has(> .pubprev[data-pubprev]) .res__flow { grid-column: 1; grid-row: auto; margin-top: 18px; }
  .pubprev, .pubprev[data-o="land"] { flex: 1 1 0; margin-top: 0; border-top: 0; padding-top: 0; grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pubprev__fig, .pubprev__np, .pubprev__w, .pubprev__ok, .pubprev__hint { grid-column: 1; grid-row: auto; }
  body:has(.pane--done > .pubprev[data-pubprev]) .shr { grid-template-columns: 84px minmax(0, 1fr) 20px; }
  body:has(.pane--done > .pubprev[data-pubprev]) .shr .shr__thumb { display: block; }
}