/*
 * Einherjar large-display tuning — 2026-09-30
 * 1920x1080 remains untouched. JS detects actual physical QHD/UHD/ultrawide panels,
 * including Windows DPI scaling, and only then enables these rules.
 */
:root{
  --ein-ui-scale:1;
  --ein-content-max:1420px;
}

/* Chromium/modern browsers: enlarge the complete UI as a layout-aware zoom.
   This keeps every legacy fixed-pixel panel, table and button readable on 4K. */
@supports (zoom:1.01){
  html.ein-large-display body{zoom:var(--ein-ui-scale)}
}

/* Use the additional monitor space as well, instead of only making the same
   1420px column larger. */
html.ein-large-display .wrap{
  width:min(var(--ein-content-max),calc(100% - 64px));
}
html.ein-display-native4k .wrap{
  width:min(var(--ein-content-max),calc(100% - 88px));
}

/* Header + menus get a little more breathing room on large displays. */
html.ein-large-display .site-header{min-height:72px}
html.ein-large-display .nav-link{padding-inline:22px}
html.ein-large-display .drop-menu{min-width:260px}
html.ein-large-display .drop-menu.mega{width:520px}
html.ein-large-display .header-search{width:245px}

/* Make the central content visibly use a large monitor, while preserving the
   same visual hierarchy and number of columns used at 1080p. */
html.ein-display-qhd .hub-grid{gap:16px}
html.ein-display-uhd .hub-grid,
html.ein-display-ultrawide .hub-grid{gap:18px}
html.ein-large-display .hub-card{padding:24px;min-height:205px}
html.ein-large-display .section{padding-top:76px}
html.ein-large-display .section-title{margin-bottom:30px}

/* Tables, forms and dense database controls are the places that become hardest
   to read on a 4K desktop. These rules are deliberately modest because body
   zoom already performs most of the scaling. */
html.ein-large-display table th,
html.ein-large-display table td{padding-top:10px;padding-bottom:10px}
html.ein-large-display input,
html.ein-large-display select,
html.ein-large-display textarea,
html.ein-large-display button{min-height:unset}
html.ein-large-display .panel,
html.ein-large-display .tool-panel,
html.ein-large-display .data-card,
html.ein-large-display .detail-media{border-radius:10px}

/* Skill and calculator screens can use more cards per physical monitor while
   keeping each card at a readable physical size. */
html.ein-display-uhd .full-skill-grid{
  grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
  gap:12px;
}
html.ein-display-ultrawide .full-skill-grid{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
}

/* WoE Command Center: use the width without turning rows into tiny text. */
html.ein-display-uhd .woe-command-center,
html.ein-display-ultrawide .woe-command-center{max-width:none}
html.ein-large-display .woe-cc-grid{gap:16px}
html.ein-large-display .woe-cc-kpis{gap:12px}

/* Search overlay should not look miniature on a physically large panel. */
html.ein-large-display .search-dialog{max-width:min(980px,82vw)}

/* Character Simulator has its own stylesheet; body zoom handles most of it.
   Give its three-column workspace a little more room on 4K/ultrawide. */
html.ein-display-uhd .studio-shell{
  grid-template-columns:minmax(300px,360px) minmax(500px,1fr) minmax(390px,480px)
}
html.ein-display-ultrawide .studio-shell{
  grid-template-columns:minmax(290px,350px) minmax(520px,1fr) minmax(390px,470px)
}
html.ein-display-uhd .archive-counts,
html.ein-display-ultrawide .archive-counts{width:min(1560px,calc(100% - 64px))}
html.ein-display-uhd .archive-tools,
html.ein-display-ultrawide .archive-tools{width:min(1460px,calc(100% - 64px))}

/* Fallback for engines that do not support CSS zoom: still enlarge the most
   important typography and controls. */
@supports not (zoom:1.01){
  html.ein-large-display body{font-size:17px}
  html.ein-large-display .nav-link{font-size:12px}
  html.ein-large-display .hub-card p{font-size:14px}
  html.ein-large-display .hub-card h3{font-size:24px}
  html.ein-large-display .page-title h1{font-size:56px}
  html.ein-display-uhd body{font-size:18px}
  html.ein-display-uhd .nav-link{font-size:13px}
  html.ein-display-uhd .hub-card p{font-size:15px}
  html.ein-display-uhd .hub-card h3{font-size:26px}
}

/* Absolutely no desktop enlargement leaks into tablet/mobile breakpoints. */
@media(max-width:1179px), (max-height:649px){
  html.ein-large-display body{zoom:1!important}
  html.ein-large-display .wrap{width:min(1420px,calc(100% - 44px))}
}