:root{--ink:#20221d;--muted:#717469;--paper:#f4f1e8;--card:#fffdf7;--green:#263e32;--gold:#c59647;--line:#ded9cb;--danger:#8f3730;--success:#2f6c48}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif}
a{color:inherit}
.topbar{min-height:76px;padding:0 max(24px,calc((100vw - 1280px)/2));background:var(--green);color:#fff;display:flex;align-items:center;gap:38px}
.brand{display:flex;align-items:center;gap:10px;font:700 21px Georgia,serif;text-decoration:none}
.brand b{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;color:var(--gold)}
nav{display:flex;align-self:stretch;flex:1}
nav a{padding:0 15px;display:flex;align-items:center;text-decoration:none;color:#d8ded8;border-bottom:3px solid transparent;font-size:14px}
nav a.active,nav a:hover{color:#fff;border-color:var(--gold)}
.account{font-size:13px}
.account a{color:#e5c990}
.container{width:min(1280px,calc(100% - 48px));margin:42px auto 80px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;color:var(--gold);margin:0 0 8px}
h1,h2,h3{font-family:Georgia,serif}
h1{font-size:38px;margin:0 0 28px}
h2{margin-top:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.stats article,.panel{background:var(--card);border:1px solid var(--line);border-radius:5px;box-shadow:0 8px 30px #20221d0a}
.stats article{padding:24px;display:grid;grid-template-columns:1fr auto;gap:8px}
.stats strong{font:38px Georgia,serif;grid-row:1/3;grid-column:2}
.stats span,.stats a,.muted{font-size:13px;color:var(--muted)}
.stats a{color:var(--success);text-decoration:none}
.panel{padding:28px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.split aside{position:sticky;top:22px}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line)}
form{display:grid;gap:17px}
label{display:grid;gap:7px;font-size:13px;font-weight:700}
input,select,textarea{width:100%;padding:12px;border:1px solid #cfc9ba;border-radius:3px;background:#fff;font:inherit}
button{padding:12px 18px;border:0;border-radius:3px;background:var(--green);color:#fff;font-weight:700;cursor:pointer}
.event-row{display:grid;grid-template-columns:130px 1fr 1fr;gap:20px;padding:17px 0;border-top:1px solid var(--line);font-size:14px}
.event-row time{color:var(--gold);font-weight:700}
.event-row span{color:var(--muted)}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{padding:14px 10px;border-bottom:1px solid var(--line);font-size:14px}
th{text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--muted)}
.table-wrap{overflow:auto}
.badge{padding:5px 9px;border-radius:20px;background:#e5eee7;color:var(--success);font-size:11px}
.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.character-grid article{padding:20px;border:1px solid var(--line)}
.character-grid h3{margin:12px 0 5px}
.character-grid p,.character-grid span{font-size:13px;color:var(--muted)}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--gold);font:20px Georgia,serif}
.flash{padding:13px 16px;margin-bottom:18px}
.flash.error{background:#f4dfdc;color:var(--danger)}
.flash.success{background:#dfece3;color:var(--success)}
footer{text-align:center;color:var(--muted);font-size:12px;padding:25px}
.login-page{min-height:100vh;background:var(--green)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.3fr 1fr}
.login-story{padding:10vw;display:flex;flex-direction:column;justify-content:center;color:#fff;background:radial-gradient(circle at 20% 20%,#3b5b49,transparent 35%),var(--green)}
.login-story h1{font-size:clamp(42px,5vw,72px);line-height:1.03}
.login-story em{color:var(--gold);font-weight:400}
.login-story>p:last-child{max-width:500px;color:#cdd7d0;font-size:18px}
.login-card{background:var(--card);padding:10vw 8vw;display:flex;flex-direction:column;justify-content:center}
.login-card .brand{margin-bottom:60px}
.login-card h2{font-size:34px;margin-bottom:5px}
.login-card form{margin-top:28px}
@media(max-width:800px){.login-shell{grid-template-columns:1fr}
.login-story{display:none}
.topbar{padding:15px 20px;flex-wrap:wrap;gap:12px}
nav{order:3;width:100%;overflow:auto}
.account{margin-left:auto}
.container{width:calc(100% - 24px);margin-top:25px}
.stats,.split{grid-template-columns:1fr}
.split aside{position:static}
.event-row{grid-template-columns:1fr}
.panel{padding:20px}
}

/* Responsive application shell and shared components */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-width:0;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
button,input,select,textarea{min-height:44px}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.container,.panel,.split>*,.public-grid>*{min-width:0}
.public-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px;align-items:start}
.public-event{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.public-event h3,.public-event p{margin:4px 0}
.mini-character{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.mini-character>div:last-child{display:grid;gap:5px;min-width:0}
.mini-character span{color:var(--muted);font-size:13px}
.core-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}
.core-data>div{display:grid;gap:5px;padding:14px;border:1px solid var(--line)}
.sheet-fields,.sheet-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sheet-fields>div,.sheet-editor>div{padding:14px;border:1px solid var(--line)}
.sheet-fields dt{font-size:11px;text-transform:uppercase;color:var(--muted)}
.sheet-fields dd{margin:7px 0 0}
.skill-checkboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.check-label{display:flex;align-items:center;gap:9px}
.check-label input{width:auto;min-height:0;flex:none}
.approval-form{display:flex;flex-wrap:wrap;align-items:end;gap:8px}
.approval-form label{min-width:120px;flex:1}
.approval-form button{flex:none}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.message-thread{display:grid;gap:12px;margin:20px 0}
.message{max-width:86%;padding:14px 16px;border-radius:8px;background:#eeeadf;border:1px solid var(--line)}
.message.staff{margin-left:auto;background:#e3ece5}
.message time{display:block;margin-top:3px;color:var(--muted);font-size:11px}
.message p{overflow-wrap:anywhere}
.ticket-type-event{padding:22px 0;border-top:1px solid var(--line)}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.table-wrap table{min-width:680px}
td,th{overflow-wrap:break-word}

@media(max-width:1100px){
 .topbar{padding-inline:24px;gap:20px}
 .topbar nav{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
 .topbar nav a{flex:0 0 auto;white-space:nowrap}
 .split{grid-template-columns:minmax(0,1fr) 300px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:800px){
 .topbar{position:relative;align-items:center}
 .topbar .brand{flex:1}
 .topbar .account{white-space:nowrap}
 .topbar nav{margin-inline:-20px;padding-inline:8px;border-top:1px solid rgba(255,255,255,.12)}
 .topbar nav a{min-height:48px;padding-inline:13px}
 .container{margin-bottom:50px}
 h1{font-size:clamp(30px,8vw,38px)}
 .public-grid,.core-data,.sheet-fields,.sheet-editor,.skill-checkboxes{grid-template-columns:1fr}
 .public-event{align-items:flex-start;flex-direction:column}
 .split>aside{width:100%}
 .character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .login-card{padding:48px max(24px,8vw)}
 .login-card .brand{margin-bottom:36px}
 .event-list article{gap:12px}
 .event-list time{width:80px;flex:none}
}

@media(max-width:560px){
 .container{width:calc(100% - 20px);margin-top:20px}
 .topbar{padding:12px 14px}
 .topbar nav{margin-inline:-14px}
 .account{font-size:0}
 .account a{font-size:13px}
 .panel{padding:16px}
 .stats{grid-template-columns:1fr}
 .character-grid{grid-template-columns:1fr}
 .approval-form{align-items:stretch;flex-direction:column}
 .approval-form>*{width:100%}
 .message{max-width:95%}
 .event-list article{align-items:flex-start;flex-direction:column}
 .event-list time{width:auto}
 footer{padding-inline:14px}
}

@media(hover:none) and (pointer:coarse){
 a,button{touch-action:manipulation}
 nav a{min-height:48px}
 input,select,textarea{font-size:16px}
}
.module-tabs{display:flex;gap:8px;overflow-x:auto;margin:-10px 0 24px;padding:4px 0 10px;-webkit-overflow-scrolling:touch}
.module-tabs a{flex:0 0 auto;padding:10px 14px;border:1px solid var(--line);border-radius:3px;background:var(--card);text-decoration:none;white-space:nowrap}
.module-tabs a.active{background:var(--green);color:#fff;border-color:var(--green)}