/* word_viewer.css — Word 98 Viewer (word.html)
   Chrome for the read-only document viewer: menu bar, toolbar, ruler,
   documents pane, page canvas, status bar, dialogs, print styles.
   Document CONTENT typography lives at the bottom (.doc-page).
   Driven by js/word_viewer.js; entry list in js/docs_manifest.js. */

/* ═══ App shell ══════════════════════════════════════════ */
html, body.wv-body { height: 100%; }

body.wv-body {
    margin: 0;
    background: teal;                     /* same backdrop as the desktop */
    overflow: hidden;
}

.wv-app {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 8px);
    margin: 4px;
}

.wv-app > .title-bar { flex-shrink: 0; }

/* Embedded in the desktop iframe → the parent window supplies the chrome */
body.framed { background: silver; }
body.framed .wv-app { height: 100vh; margin: 0; box-shadow: none; }
body.framed #wv-titlebar { display: none; }
body.framed #wv-exit-item { display: none; }

/* ═══ Menu bar ═══════════════════════════════════════════ */
.wv-menubar {
    display: flex;
    flex-wrap: wrap;
    background: silver;
    padding: 1px 2px;
    border-bottom: 1px solid #808080;
    box-shadow: 0 1px 0 #ffffff;
    position: relative;
    user-select: none;
    flex-shrink: 0;
    z-index: 400;
}

.wv-menu { position: relative; }

.wv-menu > button {
    background: none;
    border: 1px solid transparent;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    padding: 2px 7px;
    font-size: 11px;
}
.wv-menu > button:focus { outline: none; }
.wv-menu > button:hover:not([disabled]) {
    border-color: #ffffff #808080 #808080 #ffffff;   /* raised */
}
.wv-menu.open > button {
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken */
}
.wv-menu > button[disabled] {
    color: #808080;
    text-shadow: 1px 1px 0 #ffffff;                  /* classic embossed disabled */
}

.wv-menu-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: silver;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff,
                inset -2px -2px #808080, inset 2px 2px #dfdfdf,
                3px 3px 4px rgba(0, 0, 0, 0.4);
    padding: 4px 3px;
    z-index: 500;
}
.wv-menu.open .wv-menu-drop { display: block; }

.wv-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    position: relative;
    padding: 3px 10px 3px 22px;
    font-size: 11px;
    white-space: nowrap;
    cursor: default;
}
.wv-menu-item:hover:not(.disabled) { background: navy; color: #ffffff; }
.wv-menu-item.disabled { color: #808080; text-shadow: 1px 1px 0 #ffffff; }

.wv-menu-item.checked::before {
    content: '\2713';                                /* ✓ */
    position: absolute;
    left: 7px;
}
.wv-menu-item.radio.checked::before { content: '\25CF'; font-size: 7px; left: 9px; } /* ● */

.wv-menu-hint { font-size: 10px; color: #555; }
.wv-menu-item:hover:not(.disabled) .wv-menu-hint { color: #d0d0ff; }

.wv-menu-sep {
    height: 1px;
    margin: 3px 2px;
    background: #808080;
    border-bottom: 1px solid #ffffff;
}

/* ═══ Toolbar ════════════════════════════════════════════ */
.wv-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    background: silver;
    padding: 3px 4px;
    border-bottom: 1px solid #808080;
    box-shadow: 0 1px 0 #ffffff;
    flex-shrink: 0;
    user-select: none;
}

.wv-tb-btn {
    min-width: 0;
    min-height: 0;
    padding: 2px 8px;
    font-size: 11px;
}
.wv-tb-fmt { width: 24px; padding: 2px 0; }

.wv-toolbar select { font-size: 11px; height: 21px; }
.wv-tb-size { width: 42px; }
.wv-tb-label { font-size: 11px; margin-left: 2px; }
.wv-tb-flex { flex: 1; }

.wv-tb-sep {
    width: 1px;
    align-self: stretch;
    margin: 1px 3px;
    background: #808080;
    border-right: 1px solid #ffffff;
}

.wv-tb-lock {
    font-size: 10px;
    padding: 2px 8px;
    color: #444;
    background: #c7c7c7;
    box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff;  /* sunken badge */
    letter-spacing: 0.5px;
}
.wv-tb-lock.local { background: #ffffe1; color: #7a5a00; }

/* ═══ Ruler (decorative) ═════════════════════════════════ */
.wv-ruler {
    height: 17px;
    margin: 3px 4px 2px;
    background: #ffffff;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #808080;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 11px, #999999 11px 12px),
        repeating-linear-gradient(90deg, transparent 0 95px, #333333 95px 96px);
    background-size: 100% 5px, 100% 9px;
    background-position: left bottom 3px, left bottom 3px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
body.no-ruler .wv-ruler { display: none; }

/* ═══ Main area: sidebar + workspace ═════════════════════ */
.wv-main {
    display: flex;
    flex: 1;
    min-height: 0;                        /* let children scroll, not the page */
}

/* Documents pane */
.wv-sidebar {
    width: 212px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-right: 1px solid #808080;
    box-shadow: 1px 0 0 #ffffff;
}
body.no-sidebar .wv-sidebar { display: none; }

.wv-sidebar-head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 4px;
}
.wv-sidebar-head img { width: 16px; height: 16px; }

#wv-tree {
    flex: 1;
    overflow: auto;
    margin: 2px 0 4px;
}

.wv-doc-link {
    display: block;
    padding: 2px 4px;
    cursor: pointer;
    text-decoration: none;
    color: #000;
}
.wv-doc-link img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: text-bottom;
}
.wv-doc-link:hover { background: #d0d0f8; }
.wv-doc-link.active { background: navy; color: #ffffff; }

.wv-doc-date {
    display: block;
    font-size: 10px;
    color: #808080;
    margin-left: 21px;
}
.wv-doc-link.active .wv-doc-date { color: #c9c9e8; }

.wv-sidebar-foot {
    font-size: 10px;
    color: #555;
    padding: 2px 4px;
    box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff;
}

/* Workspace (the grey area behind the pages) */
.wv-workspace {
    flex: 1;
    overflow: auto;
    background: #808080;
    padding: 16px 12px;
}
.wv-workspace.wv-dragover {
    outline: 2px dashed #ffffff;
    outline-offset: -8px;
    background: #6e6e6e;
}

.wv-zoomwrap {
    width: max-content;
    margin: 0 auto;
    zoom: 1;                              /* set by JS (View ▸ Zoom) */
}

/* ═══ docx-preview output (real .docx pages) ═════════════ */
.wv-page-area .docx-wrapper {
    background: transparent;
    padding: 0;
    display: block;
}
.wv-page-area .docx-wrapper > section.docx {
    margin: 0 auto 16px;
    box-shadow: 1px 1px 0 #5a5a5a, 4px 4px 8px rgba(0, 0, 0, 0.45);
}

/* ═══ HTML entries (.doc-page) — a Word page for fragments ═══ */
.doc-page {
    box-sizing: border-box;
    width: 8.5in;
    min-height: 11in;
    padding: 1in;
    margin: 0 auto 16px;
    background: #ffffff;
    color: #000000;
    box-shadow: 1px 1px 0 #5a5a5a, 4px 4px 8px rgba(0, 0, 0, 0.45);
    font-family: "Times New Roman", Georgia, serif;
    font-size: 12pt;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.doc-page h1 {
    font-size: 20pt;
    line-height: 1.15;
    margin: 0 0 4pt;
}
.doc-page h2 {
    font-size: 13.5pt;
    margin: 16pt 0 6pt;
    border-bottom: 1px solid #999999;
    padding-bottom: 2pt;
}
.doc-page p  { margin: 0 0 10pt; }
.doc-page ul, .doc-page ol { margin: 0 0 10pt; padding-left: 0.4in; }

.doc-sub {
    color: #444444;
    font-size: 10.5pt;
    margin-bottom: 14pt !important;
}

/* Replace-me blocks in scaffolded entries */
.placeholder {
    background: #ffffcc;
    border: 1px dashed #c0a000;
    padding: 6pt 8pt;
    font-style: italic;
    color: #5a4a00;
}

/* In-document progress meter (filled by JS via data-meter-* attrs) */
.wv-meter {
    margin: 0 0 14pt;
    padding: 8pt 10pt;
    border: 1px solid #808080;
    background: #f4f4f4;
    font-family: "Times New Roman", Georgia, serif;
}
.wv-meter figcaption {
    font-size: 9.5pt;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #333333;
    margin-bottom: 4pt;
}
.wv-meter-track {
    height: 14px;
    background: #ffffff;
    box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080;
    padding: 2px;
}
.wv-meter-fill {
    display: block;
    height: 100%;
    width: 0%;
    /* segmented Win98 progress blocks */
    background: repeating-linear-gradient(90deg, #000080 0 8px, #f4f4f4 8px 10px);
    transition: width 0.6s ease;
}
.wv-meter-label {
    font-size: 9.5pt;
    color: #333333;
    margin: 4pt 0 0 !important;
}

/* ═══ Status bar ═════════════════════════════════════════ */
.wv-status { flex-shrink: 0; margin: 0 1px 1px; }
.wv-status .status-bar-field { font-size: 0.7rem; white-space: nowrap; }
#wv-status-words.over { color: #a00000; font-weight: bold; }
.wv-status-mode { flex: 1; text-align: right; }

/* ═══ Dialogs ════════════════════════════════════════════ */
.wv-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.wv-dialog-backdrop[hidden] { display: none; }

.wv-dialog { width: min(420px, 92vw); }

.wv-dialog-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.wv-dialog-row img { flex-shrink: 0; margin-top: 2px; }
.wv-dialog p { font-size: 11px; }

/* ═══ Small screens ══════════════════════════════════════ */
@media (max-width: 760px) {
    .wv-main { flex-direction: column; }
    .wv-sidebar {
        width: auto;
        max-height: 160px;
        border-right: none;
        border-bottom: 1px solid #808080;
        box-shadow: 0 1px 0 #ffffff;
    }
    .wv-ruler { display: none; }
    .wv-tb-lock { display: none; }
}

/* ═══ Print — File ▸ Print gives a clean document/PDF ════ */
@media print {
    body.wv-body { background: #ffffff; overflow: visible; }
    .wv-app { height: auto; margin: 0; box-shadow: none; background: #ffffff; }
    .wv-app > .title-bar,
    .wv-menubar,
    .wv-toolbar,
    .wv-ruler,
    .wv-sidebar,
    .wv-status,
    .wv-dialog-backdrop { display: none !important; }
    .wv-main { display: block; }
    .wv-workspace { overflow: visible; background: #ffffff; padding: 0; }
    .wv-zoomwrap { zoom: 1 !important; width: auto; }
    .doc-page,
    .wv-page-area .docx-wrapper > section.docx {
        box-shadow: none !important;
        margin: 0 auto;
    }
    .placeholder { background: none; border-color: #999999; }
}