/* Shared newsprint/charcoal theme — used by index.html and settings.html */
:root{
  --paper:#EDEAE3;        /* newsprint */
  --paper-deep:#E2DED4;
  --ink:#26241F;          /* graphite */
  --smudge:#8B867C;
  --record:#C6392B;       /* the one action colour */
  --tape:#D9A441;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Consolas",monospace;
  --grot:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--grot);
     height:100vh;overflow:hidden;display:flex;flex-direction:column}

.clapper{height:14px;flex-shrink:0;
         background:repeating-linear-gradient(-45deg,var(--ink) 0 22px,var(--paper) 22px 44px)}

/* ---- app shell: sidebar + content. Fixed to the viewport so the sidebar
   never scrolls away — only the content pane (main) scrolls internally. ---- */
.appshell{display:flex;flex:1;min-height:0}

.sidenav{width:212px;flex:0 0 212px;background:var(--ink);color:var(--paper);
         display:flex;flex-direction:column;padding:24px 0;overflow-y:auto}
.sidenav .brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:.12em;
                 text-transform:uppercase;font-weight:800;
                 padding:0 22px 20px;margin-bottom:8px;border-bottom:1px solid rgba(237,234,227,.16)}
.sidenav .brand span{color:var(--record)}
.brandmark{width:28px;height:28px;flex-shrink:0;display:block}
.navtab{display:block;width:100%;text-align:left;padding:13px 22px;font-family:var(--grot);
        font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;
        color:var(--smudge);text-decoration:none;cursor:pointer;background:none;border:none;
        border-left:3px solid transparent}
.navtab:hover{color:var(--paper);background:rgba(237,234,227,.07)}
.navtab.active{color:var(--paper);border-left-color:var(--record);background:rgba(237,234,227,.09)}
.navtab:focus-visible{outline:3px solid var(--tape);outline-offset:-3px}
.navspacer{flex:1}
.sidenav .settingslink{border-top:1px solid rgba(237,234,227,.16);margin-top:6px;padding-top:17px}

main{flex:1;min-width:0;overflow-y:auto}
.pagewrap{padding:28px 40px 60px;max-width:2200px}
.pagetitle{font-size:21px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;margin-bottom:5px}
.pagesub{font-family:var(--mono);font-size:12px;color:var(--smudge);margin-bottom:24px}

.btn{font-family:var(--grot);font-weight:700;text-transform:uppercase;letter-spacing:.09em;
     font-size:12px;padding:10px 18px;border:2px solid var(--ink);background:var(--paper);
     color:var(--ink);cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.rec{background:var(--record);border-color:var(--record);color:#fff}
.btn.rec:hover{background:#a52d21;border-color:#a52d21}
.btn:focus-visible{outline:3px solid var(--tape);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:var(--paper);color:var(--ink)}
.btn.sm{padding:6px 12px;font-size:11px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (max-width:900px){
  /* Mobile: the sidebar becomes a top bar. Avoid fixed 100vh + overflow:hidden
     here (mobile browser chrome makes that unreliable) — instead let the page
     scroll normally and keep the bar always-visible via position:sticky. */
  body{height:auto;overflow:visible}
  .appshell{flex-direction:column}
  main{overflow-y:visible}
  .sidenav{width:100%;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;align-items:center;
           padding:10px 12px;gap:2px;position:sticky;top:0;z-index:10}
  .sidenav .brand{border-bottom:none;border-right:1px solid rgba(237,234,227,.16);
                   padding:0 16px 0 4px;margin-bottom:0}
  .navtab{width:auto;padding:9px 14px;border-left:none;border-bottom:3px solid transparent}
  .navtab.active{border-left-color:transparent;border-bottom-color:var(--record)}
  .navspacer{display:none}
  .sidenav .settingslink{border-top:none;margin-top:0;padding-top:9px;margin-left:auto}
  .pagewrap{padding:20px 16px 50px}
}