/* The document preview (Shared.Ui Documents/DocumentPreviewDialog.razor, 2026-10-13) - the agreed mock-up,
   docs/document-preview-mockup.html, in both apps. The type is said in words under the name and shown by the icon's
   shape; colour is a second cue only (Steven is colourblind). */

/* The shade is only a shade: clicks go through it to the page (click away closes; another document opens). */
.dp-shade { position: fixed; inset: 0; background: rgba(12, 18, 32, .28); z-index: 1060; pointer-events: none; animation: dp-fade .18s ease; }
.dp-place { position: fixed; inset: 0; z-index: 1061; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; }
.dp { pointer-events: auto; width: min(1040px, 100%); height: min(88vh, 900px); background: #fff; border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .32); display: flex; flex-direction: column; outline: none; animation: dp-rise .2s ease;
      font-family: inherit; color: #1c2130; }
.dp.dp-gone { display: none; }
@keyframes dp-fade { from { opacity: 0; } }
@keyframes dp-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.dp-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid #e2e5ee; }
.dp-icon { font-size: 30px; line-height: 1; flex: 0 0 auto; color: #55607a; }
.dp-icon.word { color: #2b579a; }
.dp-icon.excel { color: #217346; }
.dp-icon.powerpoint { color: #b7472a; }
.dp-icon.pdf { color: #b30b00; }
.dp-title { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.dp-title b { font-size: 15px; font-weight: 600; color: #191F45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-title span { color: #6b7287; font-size: 12.5px; }
.dp-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dp-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #5c4400; }
.dp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid #08203d;
          background: #08203d; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dp-btn:hover, .dp-btn:focus-visible { background: #0d2f57; outline: none; }
.dp-btn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #08203d; }
.dp-btn:disabled { background: #e9ecf2; border-color: #d5d9e6; color: #8a90a6; cursor: not-allowed; }
.dp-x { width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; color: #55607a; font-size: 20px; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dp-x:hover, .dp-x:focus-visible { background: #eef1f6; outline: none; }

/* The pages, on grey: the frame over the "Preparing preview…" line until it has drawn. */
.dp-body { flex: 1 1 auto; min-height: 0; position: relative; background: #d9dde6; border-radius: 0 0 14px 14px; overflow: hidden; }
.dp-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; color: #3b4256; font-size: 14px; }
.dp-loaded .dp-wait { display: none; }
.dp-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.dp-say { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px;
          color: #3b4256; font-size: 15px; }
.dp-nopdf { display: none; }
.dp.no-pdf .dp-frame, .dp.no-pdf .dp-wait { display: none; }
.dp.no-pdf .dp-nopdf { display: flex; }

/* A phone: the whole screen, the action under the name. */
@media (max-width: 640px) {
    .dp-place { padding: 0; align-items: stretch; }
    .dp { width: 100%; height: 100%; border-radius: 0; }
    .dp-body { border-radius: 0; }
    .dp-head { flex-wrap: wrap; }
    .dp-title { flex-basis: calc(100% - 90px); }
    .dp-acts { order: 3; flex-basis: 100%; }
    .dp-acts .dp-btn { flex: 1; justify-content: center; }
}