:root{
  --red:#b41e1a; --red-d:#8f1714; --red-s:#fbe9e8;
  --bg:#f7f4f3; --card:#ffffff; --ink:#241a18; --mut:#6f625e; --line:#e8dedc;
  --ok:#2f6b3f; --ok-s:#e2f0e5; --warn:#a15c00; --warn-s:#fbecd2; --blue:#3b6fb6; --blue-s:#eef3fb;
  --radius:12px;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Source Sans 3",system-ui,sans-serif;line-height:1.45}
h1,h2,h3{font-family:Raleway,"Source Sans 3",sans-serif;margin:0 0 .4rem;color:var(--ink)}
h1{font-size:1.5rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
a{color:var(--red)}
:focus-visible{outline:3px solid #e0a100;outline-offset:1px}
.hide{display:none!important}
.muted{color:var(--mut)}
.center{text-align:center}

/* buttons */
button,.btn{font:inherit;cursor:pointer;border:0;border-radius:8px;padding:.55rem 1rem;background:var(--red);color:#fff;font-weight:600;min-height:40px}
button.alt,.btn.alt{background:#fff;color:var(--red);border:1px solid var(--red)}
button.sm{min-height:32px;padding:.25rem .7rem;font-size:.85rem}
button:disabled{opacity:.6;cursor:default}

/* forms */
label{display:block;font-weight:600;font-size:.88rem;margin:.7rem 0 .25rem}
input,select,textarea{width:100%;font:inherit;padding:.55rem .65rem;border:1px solid var(--line);border-radius:8px;background:#fff;min-height:40px;color:var(--ink)}
input[type=checkbox]{width:auto;min-height:0}
.row{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* staff layout: sidebar + content */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--red);color:#fff;padding:1rem .8rem;display:flex;flex-direction:column;gap:.15rem;position:sticky;top:0;height:100vh}
.side .brand{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.side .brand img{width:44px;height:44px;border-radius:50%}
.side .brand b{font-family:Raleway,sans-serif;font-size:1.05rem;line-height:1.1}
.side .brand small{display:block;font-weight:400;font-size:.72rem;opacity:.85}
.side nav{display:flex;flex-direction:column;gap:.15rem}
.side nav a{color:#fff;text-decoration:none;padding:.6rem .8rem;border-radius:8px;font-weight:600;opacity:.92}
.side nav a.active{background:rgba(255,255,255,.2);opacity:1}
.side .foot{margin-top:auto;padding:.6rem .4rem;font-size:.85rem;display:grid;gap:.4rem}
.side .foot button{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4)}
.main{padding:1.2rem 1.6rem 3rem;min-width:0}
.top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap}
.top h1{flex:1;margin:0}
.top input{width:240px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.85rem}

/* member layout: phone first */
.mtop{display:none;background:var(--red);color:#fff;padding:.7rem 1rem;align-items:center;gap:.7rem}
.mtop img{width:38px;height:38px;border-radius:50%}
.mtop b{font-family:Raleway,sans-serif;line-height:1.1}
.bottom{display:none}
body[data-mode=member] .shell{display:block}
body[data-mode=member] .side{display:none}
body[data-mode=member] .mtop{display:flex}
body[data-mode=member] .main{padding:1rem 1rem 5.5rem;max-width:640px;margin:0 auto}
body[data-mode=member] .bottom{display:grid;grid-template-columns:repeat(var(--n,3),1fr);position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);z-index:20}
.bottom a{text-align:center;padding:.8rem 0;font-size:.82rem;color:var(--mut);font-weight:600;text-decoration:none}
.bottom a.active{color:var(--red);box-shadow:inset 0 3px 0 var(--red)}

/* cards, stats */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:1rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin-bottom:1rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem}
.stat b{display:block;font-size:2rem;font-family:Raleway,sans-serif;color:var(--red-d);line-height:1.1}
.stat span{color:var(--mut);font-size:.82rem}
.bar{height:6px;background:var(--line);border-radius:9px;overflow:hidden;margin-top:.5rem}
.bar i{display:block;height:100%;background:var(--ok)}
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:1rem;align-items:start}

/* list items and tags */
.item,.duty{border-left:4px solid var(--ok);background:#fafafa;border-radius:8px;padding:.55rem .75rem;margin:.4rem 0}
.item.bad,.duty.unfilled{border-left-color:var(--red);background:var(--red-s)}
.item{display:flex;justify-content:space-between;gap:.6rem;align-items:center}
.item small{color:var(--mut)}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:.12rem .55rem;border-radius:999px;background:var(--ok-s);color:var(--ok);white-space:nowrap}
.tag.bad{background:var(--red-s);color:var(--red)}
.tag.warn{background:var(--warn-s);color:var(--warn)}
.tag.grey{background:#eee;color:var(--mut)}
.tl{display:grid;grid-template-columns:56px 1fr;gap:.1rem .8rem;margin-top:.5rem}
.tl .t{color:var(--mut);font-weight:700;padding-top:.65rem}
.lane{display:grid;grid-template-columns:64px 1fr;gap:.5rem;align-items:start;margin-top:.5rem}
.blk{background:var(--blue-s);border-left:4px solid var(--blue);border-radius:6px;padding:.4rem .6rem;font-size:.9rem;margin-bottom:.3rem}

/* tables */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:.6rem .8rem;background:#faf6f5}
td{padding:.65rem .8rem;border-top:1px solid var(--line);vertical-align:top}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--red-s)}
.tools{display:flex;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}
.tools select,.tools input{width:auto;min-width:150px}

/* drawer (details and form windows) */
.backdrop{position:fixed;inset:0;background:rgba(36,26,24,.35);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:100%;background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.15);padding:1.2rem;overflow:auto;z-index:41}
.drawer .x{float:right;background:none;color:var(--mut);font-size:1.6rem;padding:0 .5rem;min-height:0}
.kv{display:grid;grid-template-columns:125px 1fr;gap:.35rem .8rem;margin:.8rem 0}
.kv span{color:var(--mut)}
.kv small{display:block;color:var(--mut);font-weight:400}
.hist{border-left:2px solid var(--line);margin-left:.4rem;padding-left:.9rem}
.hist div{margin-bottom:.7rem;font-size:.9rem}
.hist small{display:block;color:var(--mut)}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}

/* rota */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem}
.day{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.5rem;min-height:260px}
.day h3{font-size:.85rem;color:var(--mut);margin-bottom:.4rem}
.day.today{border-color:var(--red)}
.day.today h3{color:var(--red)}
.day .duty{font-size:.8rem;padding:.3rem .45rem;margin:0 0 .35rem}
.day .duty b{display:block}
.seg{display:inline-flex;border:1px solid var(--red);border-radius:8px;overflow:hidden}
.seg button{background:#fff;color:var(--red);border-radius:0;min-height:36px}
.seg button.on{background:var(--red);color:#fff}

/* member screens */
.hero{background:linear-gradient(180deg,#fbf1f0,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
.hero p{margin:0;color:var(--mut)}
.next{background:var(--red);color:#fff;border-radius:16px;padding:1rem;margin-bottom:1rem}
.next h2{color:#fff;font-size:1.5rem;margin:.2rem 0}
.next button{background:#fff;color:var(--red);width:100%;margin-top:.8rem;padding:.7rem}
.pc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.8rem;margin-bottom:.6rem}

/* settings permission grid and messages */
.perm{display:grid;gap:.3rem;align-items:center;font-size:.85rem;border-bottom:1px solid var(--line);padding:.4rem 0}
.perm.h{font-weight:600;color:var(--mut)}
.perm span:not(:first-child){text-align:center}
.msg{padding:.6rem .8rem;border-radius:8px;margin:.6rem 0}
.msg.err{background:var(--red-s);color:var(--red)}
.msg.ok{background:var(--ok-s);color:var(--ok)}

/* sign-in page */
.orn{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='none' stroke='%23b41e1a' stroke-width='1'%3E%3Ccircle cx='14' cy='7' r='2'/%3E%3Cellipse cx='14' cy='2.5' rx='1.6' ry='2.4'/%3E%3Cellipse cx='14' cy='11.5' rx='1.6' ry='2.4'/%3E%3Cellipse cx='9.5' cy='7' rx='2.4' ry='1.6'/%3E%3Cellipse cx='18.5' cy='7' rx='2.4' ry='1.6'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/28px 14px}
.login{max-width:420px;margin:7vh auto;padding:0 1rem}
.login .card{border-top:4px solid var(--red)}

/* tablet and phone */
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;padding:.5rem}
  .side .brand{margin:0 .6rem 0 0}.side .brand small,.side .foot{display:none}
  .side nav{flex-direction:row}.side nav a{white-space:nowrap}
  .main{padding:1rem}
  .cols{grid-template-columns:1fr}
  .week{grid-template-columns:1fr}
  .day{min-height:0}
  .top input{width:100%}
}