/* Hovarn Classic · View — styles for hovarn-view.js.
   No palette of its own: every colour, font, radius and shadow comes from the host app's theme tokens
   (--brand-*, --accent-*, --paper*, --sheet, --ink-*, --line*, --f-display, --f-body, --r-*, --sh-*).
   The fallbacks after each token only matter when the viewer is embedded in an app without the theme.
   Surfaces: "stage" (dark, for video and images) uses --brand-950; "paper" (documents) uses --paper-2 / --sheet. */

.hv{
  --hv-bar-h:60px;
  position:relative; display:flex; flex-direction:column; min-height:0; height:100%; width:100%;
  font-family:var(--f-body, "Inter", system-ui, sans-serif); font-size:var(--t-14, .875rem); line-height:1.45;
  color:var(--ink-1, #1a1f2b); background:var(--paper-2, #f3efe7); outline:none; isolation:isolate;
}
.hv *, .hv *::before, .hv *::after{box-sizing:border-box}
.hv[data-surface="stage"]{background:var(--brand-950, #071a33); color:var(--on-brand, #fff)}
.hv-ico{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.hv-sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- full-screen dialog */
html.hv-lock{overflow:hidden}
.hv-dialog{position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; overflow:hidden}
.hv-dialog::backdrop{background:rgba(var(--brand-rgb, 11,37,69), .55)}
.hv-dialog[open]{animation:hv-in var(--dur, 200ms) var(--ease, ease-out)}
@keyframes hv-in{from{opacity:0; transform:scale(.985)}to{opacity:1; transform:none}}

/* ---------- inline (mount) */
.hv-host > .hv[data-mode="inline"]{height:clamp(420px, 70vh, 820px); border:1px solid var(--line, #e6e1d8); border-radius:var(--r-md, 12px); overflow:hidden; box-shadow:var(--sh-1, 0 1px 2px rgba(11,37,69,.06))}

/* ---------- toolbar */
.hv-bar{display:flex; align-items:center; gap:var(--s3, 12px); min-height:var(--hv-bar-h); padding:8px 10px 8px 16px; flex:none; flex-wrap:wrap;
  background:var(--sheet, #fff); color:var(--ink-1, #1a1f2b); border-bottom:1px solid var(--line, #e6e1d8)}
.hv[data-surface="stage"] .hv-bar{background:var(--brand-900, #0b2545); color:var(--on-brand, #fff); border-bottom-color:color-mix(in srgb, var(--on-brand, #fff) 8%, transparent)}
.hv-id{display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 220px}
.hv-badge{flex:none; display:inline-grid; place-items:center; min-width:44px; height:26px; padding:0 8px; border-radius:var(--r-sm, 8px);
  font:700 11px/1 var(--f-display, system-ui, sans-serif); letter-spacing:.06em; background:var(--brand-50, #f0f3f8); color:var(--brand-900, #0b2545); border:1px solid var(--brand-200, #d6deea)}
.hv[data-surface="stage"] .hv-badge{background:color-mix(in srgb, var(--on-brand, #fff) 8%, transparent); color:var(--on-brand, #fff); border-color:color-mix(in srgb, var(--on-brand, #fff) 16%, transparent)}
.hv-names{min-width:0}
.hv-title{margin:0; font:600 var(--t-16, 1rem)/1.25 var(--f-display, system-ui, sans-serif); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit}
.hv-meta{margin:2px 0 0; font-size:var(--t-12, .75rem); color:var(--ink-3, #5f6675); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hv[data-surface="stage"] .hv-meta{color:var(--on-brand-2, #c9d3e3)}
.hv-tools{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.hv-tools:empty{display:none}
.hv-end{display:flex; align-items:center; gap:4px; margin-left:auto}
.hv-sep{width:1px; height:24px; background:var(--line, #e6e1d8); margin:0 4px}
.hv[data-surface="stage"] .hv-sep{background:color-mix(in srgb, var(--on-brand, #fff) 14%, transparent)}
.hv-pos{font:600 var(--t-12, .75rem)/1 var(--f-display, system-ui, sans-serif); font-variant-numeric:tabular-nums; padding:0 4px; color:inherit; white-space:nowrap}

/* buttons */
.hv-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; height:40px; padding:0 10px; border:1px solid transparent; border-radius:var(--r-sm, 8px);
  background:transparent; color:inherit; font:600 var(--t-14, .875rem)/1 var(--f-display, system-ui, sans-serif); cursor:pointer; transition:background var(--dur, 200ms), color var(--dur, 200ms)}
.hv-btn:hover{background:var(--paper-2, #f3efe7)}
.hv[data-surface="stage"] .hv-btn:hover{background:color-mix(in srgb, var(--on-brand, #fff) 10%, transparent)}
.hv-btn:disabled{opacity:.4; cursor:default; background:transparent}
.hv-btn:focus-visible, .hv-tab:focus-visible, .hv-thumb:focus-visible, .hv-strip-b:focus-visible, .hv-link:focus-visible, .hv-pages:focus-visible, .hv-sheet:focus-visible, .hv-docx:focus-visible, .hv-pageno input:focus-visible, .hv-find-in:focus-visible{
  outline:none; box-shadow:var(--focus, 0 0 0 2px #fff, 0 0 0 4px #0b2545)}
.hv-close{margin-left:4px}
.hv-dl{border-color:var(--line-2, #d9d2c5)}
.hv[data-surface="stage"] .hv-dl{border-color:color-mix(in srgb, var(--on-brand, #fff) 22%, transparent)}
.hv-btn-solid{background:var(--brand-900, #0b2545); color:var(--on-brand, #fff); padding:0 16px; height:44px}
.hv-btn-solid:hover{background:var(--brand-800, #13315c)}
.hv-btn-line{background:var(--sheet, #fff); color:var(--brand-900, #0b2545); border-color:var(--line-2, #d9d2c5); padding:0 16px; height:44px}
.hv-btn-line:hover{background:var(--paper, #fbfaf7)}
.hv-link{border:0; background:none; padding:4px 2px; margin-left:auto; color:var(--brand-700, #1d4271); font:600 var(--t-14, .875rem)/1.2 var(--f-display, system-ui, sans-serif); text-decoration:underline; text-underline-offset:3px; cursor:pointer; border-radius:4px}
.hv-zoom{display:inline-flex; align-items:center; gap:2px}
.hv-zval{min-width:48px; text-align:center; font:600 var(--t-12, .75rem)/1 var(--f-display, system-ui, sans-serif); font-variant-numeric:tabular-nums}

/* note band (pptx disclaimer, resume, degraded) */
.hv-note{display:flex; align-items:center; gap:10px; flex:none; padding:10px 16px; font-size:var(--t-14, .875rem);
  background:var(--info-bg, #e9f0fa); color:var(--brand-900, #0b2545); border-bottom:1px solid var(--brand-200, #d6deea)}
.hv-note .hv-ico{color:var(--info, #2b5ea8)}
.hv-note-warn{background:var(--warn-bg, #fdf3dc); border-bottom-color:var(--line-2, #d9d2c5)}
.hv-note-warn .hv-ico{color:var(--warn, #8a5a00)}
.hv-note[hidden]{display:none}

/* body + loading */
.hv-body{position:relative; flex:1 1 auto; min-height:0; overflow:hidden}
.hv-loading{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:12px; color:var(--ink-2, #4a5263); font-size:var(--t-14, .875rem)}
.hv[data-surface="stage"] .hv-loading{color:var(--on-brand-2, #c9d3e3)}
.hv-spin{width:28px; height:28px; border-radius:50%; border:3px solid var(--line, #e6e1d8); border-top-color:var(--accent-500, #f26a1b); animation:hv-spin .8s linear infinite}
@keyframes hv-spin{to{transform:rotate(360deg)}}

/* cards: unknown type + errors */
.hv-card{position:absolute; inset:0; margin:auto; width:min(440px, calc(100% - 32px)); height:max-content; max-height:calc(100% - 32px); overflow:auto; padding:28px 24px; text-align:center;
  background:var(--sheet, #fff); color:var(--ink-1, #1a1f2b); border:1px solid var(--line, #e6e1d8); border-radius:var(--r-lg, 18px); box-shadow:var(--sh-2, 0 6px 18px -6px rgba(11,37,69,.18))}
.hv-card-ico{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:var(--r-md, 12px); background:var(--paper-2, #f3efe7); color:var(--brand-800, #13315c); margin-bottom:12px}
.hv-card-ico .hv-ico{width:26px; height:26px}
.hv-card h3{margin:0 0 6px; font:700 var(--t-18, 1.125rem)/1.25 var(--f-display, system-ui, sans-serif); color:var(--brand-900, #0b2545)}
.hv-card p{margin:0 0 8px; color:var(--ink-2, #4a5263); overflow-wrap:anywhere}
.hv-card p b{color:var(--ink-1, #1a1f2b)}
.hv-card-acts{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px}
.hv-card-acts:empty{display:none}

/* ---------- video */
.hv-video{position:absolute; inset:0; display:grid; place-items:center; padding:16px}
.hv-video > video, .hv-video > .plyr{width:100%; max-width:min(100%, calc((100dvh - 150px) * 16 / 9)); max-height:100%}
.hv-video video{display:block; width:100%; background:var(--brand-950, #071a33); border-radius:var(--r-md, 12px)}
.hv-video .plyr{border-radius:var(--r-md, 12px); overflow:hidden;
  --plyr-color-main:var(--accent-500, #f26a1b);
  --plyr-video-control-color:var(--on-brand, #fff);
  --plyr-video-control-color-hover:var(--on-accent, #071a33);
  --plyr-font-family:var(--f-body, system-ui, sans-serif);
  --plyr-tooltip-background:var(--sheet, #fff); --plyr-tooltip-color:var(--brand-900, #0b2545);
  --plyr-menu-background:var(--sheet, #fff); --plyr-menu-color:var(--ink-1, #1a1f2b);
  --plyr-control-radius:var(--r-sm, 8px)}

/* ---------- image (Viewer.js inline) */
.hv-image{position:absolute; inset:0}
.hv-image > img{display:none}
.hv-image .viewer-container{background:transparent !important}
.hv-image .viewer-canvas{background:transparent}
.hv-image .viewer-canvas > img{background:var(--sheet, #fff); box-shadow:var(--sh-3, 0 24px 60px -18px rgba(7,26,51,.5))}
.hv-image-plain > img{display:block; position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); object-fit:contain}

/* ---------- pdf */
.hv-pdf{position:absolute; inset:0; display:flex}
.hv-thumbs{flex:none; width:156px; overflow:auto; padding:12px 10px; background:var(--sheet, #fff); border-right:1px solid var(--line, #e6e1d8)}
.hv-thumbs[hidden]{display:none}
.hv-thumbs ol{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.hv-thumb{display:grid; justify-items:center; gap:4px; width:100%; padding:6px; border:1px solid transparent; border-radius:var(--r-sm, 8px); background:none; cursor:pointer; color:var(--ink-2, #4a5263); font:600 var(--t-12, .75rem)/1 var(--f-display, system-ui, sans-serif)}
.hv-thumb:hover{background:var(--paper, #fbfaf7)}
.hv-thumb[aria-current]{border-color:var(--accent-500, #f26a1b); background:var(--accent-50, #fdeede); color:var(--accent-700, #b84508)}
.hv-thumb-c{display:block; width:100%; aspect-ratio:1/1.414; background:var(--paper, #fbfaf7); border:1px solid var(--line, #e6e1d8); box-shadow:var(--sh-1, 0 1px 2px rgba(11,37,69,.06))}
.hv-thumb-c canvas{display:block; width:100%; height:auto}
.hv-pages{flex:1; min-width:0; overflow:auto; padding:16px 24px 40px; display:flex; flex-direction:column; align-items:center; gap:16px; overscroll-behavior:contain}
.hv-page{position:relative; flex:none; background:var(--sheet, #fff); box-shadow:var(--sh-2, 0 6px 18px -6px rgba(11,37,69,.18)); border-radius:2px; overflow:hidden;
  --user-unit:1; --total-scale-factor:calc(var(--scale-factor, 1) * var(--user-unit)); --scale-round-x:1px; --scale-round-y:1px}
.hv-page:not(.hv-ready)::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(var(--brand-rgb, 11,37,69), .04), transparent); background-size:200% 100%; animation:hv-shim 1.2s linear infinite}
@keyframes hv-shim{to{background-position:-200% 0}}
.hv-canvas{display:block}
.hv-pageno{display:inline-flex; align-items:center; gap:6px; font:600 var(--t-12, .75rem)/1 var(--f-display, system-ui, sans-serif); font-variant-numeric:tabular-nums; white-space:nowrap}
.hv-pageno input{width:44px; height:34px; text-align:center; border:1px solid var(--border-input, #857f73); border-radius:var(--r-sm, 8px); font:inherit; color:var(--ink-1, #1a1f2b); background:var(--sheet, #fff)}
/* PDF.js text layer (adapted from pdf_viewer.css, Apache-2.0) */
.hv .textLayer{position:absolute; inset:0; overflow:clip; opacity:1; line-height:1; text-align:initial; -webkit-text-size-adjust:none; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; z-index:0;
  --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size))}
.hv .textLayer :is(span, br){color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%}
.hv .textLayer > :not(.markedContent), .hv .textLayer .markedContent span:not(.markedContent){z-index:1; --font-height:0; font-size:calc(var(--text-scale-factor) * var(--font-height)); --scale-x:1; --rotate:0deg; transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}
.hv .textLayer .markedContent{display:contents}
.hv .textLayer span.hv-hit{position:static; border-radius:3px; background:rgba(var(--accent-rgb, 242,106,27), .28); margin:-1px; padding:1px}
.hv .textLayer span.hv-hit-cur{background:rgba(var(--accent-rgb, 242,106,27), .6); box-shadow:0 0 0 2px var(--accent-500, #f26a1b)}
.hv .textLayer ::selection{background:rgba(var(--brand-rgb, 11,37,69), .22)}
.hv .textLayer .endOfContent{display:block; position:absolute; inset:100% 0 0; z-index:0; cursor:default; user-select:none}
/* find bar */
.hv-find{display:flex; align-items:center; gap:6px; flex:none; padding:8px 12px; background:var(--sheet, #fff); border-bottom:1px solid var(--line, #e6e1d8)}
.hv-find[hidden]{display:none}
.hv-find-ico{display:inline-flex; color:var(--ink-3, #5f6675)}
.hv-find-in{flex:1; min-width:0; max-width:420px; height:38px; padding:0 12px; border:1px solid var(--border-input, #857f73); border-radius:var(--r-sm, 8px); font:inherit; font-size:var(--t-16, 1rem); color:var(--ink-1, #1a1f2b); background:var(--sheet, #fff)}
.hv-find-n{min-width:84px; font-size:var(--t-12, .75rem); color:var(--ink-2, #4a5263); font-variant-numeric:tabular-nums}

/* ---------- spreadsheets */
.hv-sheetview{position:absolute; inset:0; display:flex; flex-direction:column}
.hv-tabs{display:flex; gap:2px; padding:8px 12px 0; flex:none; overflow-x:auto; background:var(--paper-2, #f3efe7); border-bottom:1px solid var(--line-2, #d9d2c5)}
.hv-tab{flex:none; height:38px; padding:0 16px; border:1px solid transparent; border-bottom:0; border-radius:var(--r-sm, 8px) var(--r-sm, 8px) 0 0; background:transparent; color:var(--ink-2, #4a5263); font:600 var(--t-14, .875rem)/1 var(--f-display, system-ui, sans-serif); cursor:pointer; position:relative; top:1px}
.hv-tab:hover{color:var(--brand-900, #0b2545)}
.hv-tab[aria-selected="true"]{background:var(--sheet, #fff); color:var(--brand-900, #0b2545); border-color:var(--line-2, #d9d2c5); box-shadow:inset 0 2px 0 var(--accent-500, #f26a1b)}
.hv-sheet{flex:1; min-height:0; overflow:auto; background:var(--sheet, #fff); overscroll-behavior:contain; font-size:calc(var(--t-14, .875rem) * var(--hv-sheet-scale, 1))}
.hv-sheet-empty{padding:32px; color:var(--ink-3, #5f6675)}
.hv-table{border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; color:var(--ink-1, #1a1f2b); min-width:100%}
.hv-table th, .hv-table td{padding:.45em .75em; border-right:1px solid var(--line, #e6e1d8); border-bottom:1px solid var(--line, #e6e1d8); white-space:nowrap; text-align:left; vertical-align:top; max-width:420px; overflow:hidden; text-overflow:ellipsis}
.hv-table thead th{position:sticky; top:0; z-index:2; background:var(--paper-2, #f3efe7); color:var(--ink-3, #5f6675); font:600 .8em/1.2 var(--f-display, system-ui, sans-serif); text-align:center; border-bottom-color:var(--line-2, #d9d2c5)}
.hv-table .hv-rh{position:sticky; left:0; z-index:1; background:var(--paper-2, #f3efe7); color:var(--ink-3, #5f6675); font:600 .8em/1.2 var(--f-display, system-ui, sans-serif); text-align:right; min-width:44px}
.hv-table thead .hv-rh{z-index:3}
.hv-table tr.hv-head > *{position:sticky; top:calc(1.2em + .9em + 1px); z-index:2; background:var(--brand-50, #f0f3f8); color:var(--brand-900, #0b2545); font:600 1em/1.3 var(--f-display, system-ui, sans-serif); white-space:normal; min-width:6em; border-bottom:1px solid var(--line-2, #d9d2c5)}
.hv-table tr.hv-head > .hv-rh{z-index:3; background:var(--paper-2, #f3efe7); color:var(--ink-3, #5f6675); font-size:.8em}
.hv-table td.n{text-align:right}
.hv-table td.b{text-align:center}
.hv-table td.err{color:var(--danger, #b42424)}
.hv-table td.fx{color:var(--ink-3, #5f6675); font-style:italic}
.hv-table td[title]{background-image:linear-gradient(135deg, rgba(var(--accent-rgb, 242,106,27), .55) 5px, transparent 5px)}
.hv-table tbody tr:hover > td{background-color:var(--paper, #fbfaf7)}

/* ---------- Word (docx-preview) */
.hv-docx{position:absolute; inset:0; overflow:auto; overscroll-behavior:contain}
.hv-docx-host{padding:16px 8px 40px}
.hv-docx .docx-wrapper{background:transparent !important; padding:0 !important; display:flex; flex-direction:column; align-items:center; gap:16px}
.hv-docx .docx-wrapper > section.docx{margin:0 !important; box-shadow:var(--sh-2, 0 6px 18px -6px rgba(11,37,69,.18)) !important}

/* ---------- PowerPoint */
.hv-pptx{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 16px 12px; overflow:auto}
.hv-slide{width:min(100%, calc((100dvh - 330px) * 16 / 9)); min-width:min(100%, 280px); flex:none; background:var(--sheet, #fff); box-shadow:var(--sh-2, 0 6px 18px -6px rgba(11,37,69,.18)); border-radius:4px; overflow:hidden}
.hv-slide-nav{display:flex; align-items:center; gap:12px; flex:none}
.hv-slide-pos{min-width:64px; text-align:center; font:700 var(--t-16, 1rem)/1 var(--f-display, system-ui, sans-serif); font-variant-numeric:tabular-nums; color:var(--brand-900, #0b2545)}
.hv-strip{display:flex; gap:8px; max-width:100%; overflow-x:auto; padding:4px 2px 6px; flex:none}
.hv-strip-b{flex:none; width:116px; padding:0; border:2px solid transparent; border-radius:6px; background:var(--sheet, #fff); cursor:pointer; overflow:hidden; box-shadow:var(--sh-1, 0 1px 2px rgba(11,37,69,.06)); font:600 var(--t-12, .75rem)/1 var(--f-display, system-ui, sans-serif); color:var(--ink-2, #4a5263); min-height:40px}
.hv-strip-b[aria-current]{border-color:var(--accent-500, #f26a1b)}

/* ---------- phones */
@media (max-width: 760px){
  .hv-bar{padding:6px 6px 6px 12px; gap:6px}
  .hv-id{flex:1 1 0; order:1}
  .hv-end{order:2}
  .hv-tools{order:3; flex:1 1 100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-top:2px}
  .hv-dl span{display:none}
  .hv-dl{border-color:transparent}
  .hv-pos{display:none}
  .hv-badge{min-width:38px; font-size:10px}
  .hv-thumbs:not([hidden]){position:absolute; z-index:5; top:0; bottom:0; left:0; box-shadow:var(--sh-3, 0 24px 60px -18px rgba(11,37,69,.35))}
  .hv-pages{padding:8px 8px 32px; gap:10px}
  .hv-video{padding:0}
  .hv-video video, .hv-video .plyr{border-radius:0}
  .hv-video .plyr__volume input, .hv-video .plyr [data-plyr="rewind"], .hv-video .plyr [data-plyr="fast-forward"], .hv-video .plyr [data-plyr="pip"]{display:none}
  .hv-slide{width:100%}
  .hv-note{padding:8px 12px; font-size:var(--t-12, .75rem)}
  .hv-find{padding:6px 8px; gap:2px}
  .hv-find-n{min-width:0}
  .hv-host > .hv[data-mode="inline"]{height:clamp(380px, 75vh, 640px)}
}
@media (prefers-reduced-motion: reduce){
  .hv-dialog[open]{animation:none}
  .hv-spin, .hv-page::after{animation-duration:3s}
}