.mobile-view-picker{display:none}
@media(max-width:700px){
 .main-nav{position:relative!important;top:auto!important;z-index:10}
 .nav-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"overview overview" "logs levels" "records other";overflow:visible!important;align-items:stretch;gap:8px;padding:10px 0}
 .nav-inner>.nav-brand,.nav-inner>.nav-spacer{display:none}
 .nav-inner>.nav-link{display:flex;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #705638;border-radius:4px;font-size:14px}
 .nav-inner>a[href="index.html"]{grid-area:overview}
 .nav-inner>.nav-dropdown{display:contents}
 .nav-trigger{display:flex;flex-direction:column;justify-content:center!important;gap:6px;width:100%;min-height:88px;padding:10px 5px;border:1px solid #a17d42;border-radius:5px;background:linear-gradient(155deg,#4b341b,#21170e);color:#f5dc9d;box-shadow:inset 0 1px #b38c4e,0 3px 6px #0008;font:bold 15px Georgia,serif;text-align:center;white-space:normal}
 .nav-trigger.active,.nav-trigger[aria-expanded="true"]{border-color:#e2b862;background:linear-gradient(155deg,#705027,#35230f);color:#ffeac0;box-shadow:inset 0 -3px #d5ab58,0 3px 6px #0008}
 .nav-trigger .nav-rune{display:grid;height:24px;min-width:26px;font-size:11px}.nav-trigger>span:last-child{display:none}
 .nav-trigger[aria-controls="nav-logs"]{grid-area:logs}.nav-trigger[aria-controls="nav-levels"]{grid-area:levels}.nav-trigger[aria-controls="nav-record"]{grid-area:records}.nav-trigger[aria-controls="nav-other"]{grid-area:other}
 .nav-dropdown-panel{position:static!important;grid-column:1/-1;grid-row:4;left:auto!important;right:auto!important;top:auto!important;min-width:0;width:100%;box-sizing:border-box;box-shadow:none;border:1px solid #a17d42;border-radius:4px;background:#171008}
 .nav-dropdown-panel .nav-link{min-height:48px;padding:12px 16px;font-size:14px;white-space:normal;justify-content:flex-start}
 .nav-dropdown-panel[hidden]{display:none!important}
 .mobile-view-picker{display:grid;gap:6px;margin:12px 0;color:#d6c39b;font-size:13px}
 .mobile-view-picker select{width:100%;min-height:48px;padding:10px;background:#17120d;color:#efd596;border:1px solid #67543a;font:inherit}
 #historyLocalNav{display:block;position:static}
 #historyLocalNav>a,#historyLocalNav>strong,.collection-shell>.subnav{display:none!important}
 .period-bar{position:static!important;top:auto!important}
 .chart-card{min-width:0;max-width:100%}
 body[data-page="progress"] .section-head{flex-wrap:wrap}
 body[data-page="progress"] .section-head>select{max-width:100%}
 .data-strip{overflow:visible;flex-wrap:wrap;gap:8px}
 .data-chip{max-width:100%;box-sizing:border-box;min-width:0;white-space:normal;flex-wrap:wrap}
 .data-actions{width:100%;flex-wrap:wrap;gap:8px}
 .data-actions>button,.data-actions>a{min-height:44px;white-space:normal;flex:1 1 130px}
 .clog-controls{grid-template-columns:minmax(0,1fr)}
 .clog-controls input,.clog-controls select,.pager button{min-height:44px;min-width:0;font-size:16px}
 .pager{flex-wrap:wrap}.pager>span{flex:1 1 100%;text-align:center;order:-1}
 .nav-trigger:focus-visible,.mobile-view-picker select:focus-visible{outline:2px solid #efd596;outline-offset:2px}
}

/* Keep wide chart canvases inside their cards on small screens. */
@media(max-width:760px){main .grid>*,main .grid{min-width:0;max-width:100%}}