/* ============================================================
   Rapple OS — shared app stylesheet
   Loaded AFTER each page's own CSS so it normalises the look
   without needing markup changes. Class aliases cover the
   different names pages grew over time (mut/muted, card/kpi/tile).
   v1
   ============================================================ */

:root{
  --gold:#C6A766; --gold-deep:#A88848; --char:#141414; --ink:#26241F;
  --ivory:#FAF8F2; --paper:#FFFFFF; --line:#E7E1D3; --mute:#7A756B;
  --red:#9E2B25; --green:#2E7D32; --amber:#B8860B;
  --r-s:10px; --r-m:14px; --r-l:18px;
  --tabh:57px;
}

/* ---------- base ---------- */
body{
  background:var(--ivory) !important;
  color:var(--char) !important;
  font-family:'Figtree',system-ui,-apple-system,sans-serif !important;
  margin:0;
}
h1,h2,h3,h4{font-family:'Marcellus',Georgia,serif !important;font-weight:400 !important;}

/* ---------- back bar (identical on every page) ---------- */
#osback{
  position:sticky; top:0; z-index:9999;
  background:var(--char) !important; border-bottom:1px solid #2A2418 !important;
  padding:0; margin:0; display:block; width:100%;
  padding-top:env(safe-area-inset-top,0px);
}
#osback a{
  display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
  color:var(--gold) !important; font:800 13px/1 'Figtree',system-ui,sans-serif !important;
  text-decoration:none; letter-spacing:.01em;
}
#osback a:active{opacity:.65;}
#osback .ar{font-size:15px; line-height:1;}

/* ---------- page frame ---------- */
.wrap{max-width:1050px !important; margin:0 auto !important; padding:15px 13px calc(24px + var(--tabh)) !important;}
main{max-width:1050px; margin:0 auto; padding:15px 13px calc(24px + var(--tabh));}

/* ---------- headings row ---------- */
.top,.tophd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px;}
.top h1,.tophd h1{font-size:23px !important;color:var(--gold-deep) !important;}

.pill{
  font-size:11px !important; font-weight:800 !important; letter-spacing:.06em;
  text-transform:uppercase; border:1px solid var(--line) !important;
  color:var(--gold-deep) !important; background:var(--paper) !important;
  border-radius:999px !important; padding:4px 10px !important;
}

/* ---------- surfaces (aliases unify the old names) ---------- */
.card,.kpi,.panel,.tile,.box{
  background:var(--paper) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-m) !important;
}
.card,.kpi,.tile{padding:13px 14px !important;}
/* a tile is a light surface, so its text must be dark - pages that were
   built with white text on a dark tile were rendering invisible titles */
.tile{color:var(--char) !important; text-decoration:none !important;}
.tile span{color:var(--gold-deep) !important;}
a.tile,button.tile{cursor:pointer;}
a.tile:active,button.tile:active{opacity:.7;}
.panel{padding:15px 16px !important;margin-bottom:12px !important;}
.panel h2{font-size:17px !important;color:var(--char) !important;margin:0 0 10px !important;}

.cards,.kpis{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:10px !important;margin-bottom:14px !important;}

.card .k,.kpi .k,.card .lbl,.kpi .lbl{
  font-size:10.5px !important;font-weight:800 !important;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute) !important;
}
.card .v,.kpi .v,.card .val,.kpi .val,.card .big,.kpi .big{
  font-family:'Marcellus',Georgia,serif !important;font-size:24px !important;
  color:var(--gold-deep) !important;margin-top:4px;line-height:1.15;
}
.card .s,.kpi .s,.card .sub,.kpi .sub{font-size:11.5px !important;color:var(--mute) !important;margin-top:2px;}

/* ---------- text ---------- */
.mut,.muted,.note,.sub{color:var(--mute) !important;}
.gold,.gd{color:var(--gold-deep) !important;font-weight:700;}

/* ---------- buttons ---------- */
button,.btn{font-family:'Figtree',system-ui,sans-serif !important;}
.bar button,.seg button,button.btn,.btnp{
  background:var(--paper) !important;border:1px solid var(--line) !important;
  color:var(--char) !important;border-radius:var(--r-s) !important;
  padding:9px 13px !important;font:700 13px 'Figtree',sans-serif !important;
  cursor:pointer;min-height:40px;
}
.bar button:active,.seg button:active{opacity:.7;}
.seg button.on,button.on,.btn.gold{
  background:var(--gold-deep) !important;border-color:var(--gold-deep) !important;color:#fff !important;
}
.btn.red{background:var(--red) !important;border-color:var(--red) !important;color:#fff !important;}
button[disabled],.btn[disabled]{opacity:.5;pointer-events:none;}

/* ---------- forms ---------- */
input[type=date],input[type=text],input[type=number],input[type=search],select,textarea{
  background:var(--paper) !important;border:1px solid var(--line) !important;
  color:var(--char) !important;border-radius:var(--r-s) !important;
  padding:9px 10px !important;font:600 13px 'Figtree',sans-serif !important;
  min-height:40px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;}
th{
  text-align:left;font-size:10.5px !important;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mute) !important;font-weight:800 !important;padding:7px 8px !important;
  border-bottom:1px solid var(--line) !important;white-space:nowrap;
}
td{padding:8px !important;border-bottom:1px solid var(--line) !important;vertical-align:top;}
td.n,th.n{text-align:right;white-space:nowrap;}
tr:last-child td{border-bottom:0 !important;}
.tw,.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---------- messages ---------- */
.msg{
  padding:11px 13px !important;border-radius:12px !important;
  background:var(--paper) !important;border:1px solid var(--line) !important;
  font-size:13.5px !important;margin-bottom:12px !important;color:var(--char) !important;
}
.msg.err,.err{border-color:var(--red) !important;color:var(--red) !important;}
.msg.ok,.ok{border-color:var(--green) !important;}

/* ---------- shared bottom tab bar (injected by app.js) ---------- */
#osTabs{
  position:fixed;bottom:0;left:0;right:0;z-index:9998;
  background:var(--paper);border-top:1px solid var(--line);
  display:flex;padding:6px 3px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
#osTabs a{
  flex:1;text-align:center;text-decoration:none;padding:7px 2px 5px;
  color:var(--mute);font:700 10px 'Figtree',sans-serif;
}
#osTabs a .ic{display:block;line-height:0;margin-bottom:3px;}
#osTabs a .ic svg{width:21px;height:21px;display:inline-block;vertical-align:middle;}
#osTabs a.on .ic svg{stroke-width:2;}
#osTabs a.on{color:var(--gold-deep);}
#osTabs a.on .ic{filter:none;}
#osTabs a:active{opacity:.6;}

@media(min-width:900px){
  #osTabs{
    position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);
    max-width:1050px;margin:0 auto;box-shadow:none;
  }
  :root{--tabh:0px;}
}

/* ---------- small screens ---------- */
@media(max-width:640px){
  .wrap,main{padding-left:11px !important;padding-right:11px !important;}
  .card .v,.kpi .v{font-size:20px !important;}
  .top h1,.tophd h1{font-size:20px !important;}
}

/* nothing may scroll sideways */
html,body{max-width:100%;overflow-x:hidden;}

/* ---------- notices: the app tells you when something changed ---------- */
#osNotes{position:fixed; right:12px; z-index:9999; display:flex; flex-direction:column;
  gap:8px; max-width:330px; width:calc(100vw - 24px); pointer-events:none;
  bottom:calc(70px + env(safe-area-inset-bottom,0px));}
@media(min-width:900px){#osNotes{bottom:16px;}}
.osNote{pointer-events:auto; background:var(--char,#141414); color:#FAF8F2;
  border-radius:12px; padding:11px 12px 11px 13px; display:flex; gap:10px;
  align-items:flex-start; box-shadow:0 10px 30px rgba(0,0,0,.28);
  border-left:3px solid var(--gold,#C6A766); cursor:pointer;
  animation:osNoteIn .22s ease;}
.osNote.warn{border-left-color:#D8863F;}
.osNote b{display:block; font-size:13px; font-weight:700; line-height:1.25;}
.osNote span{display:block; font-size:11.5px; color:#A9A296; margin-top:2px; line-height:1.35;}
.osNote .x{margin-left:auto; background:none; border:0; color:#7E786D; font-size:17px;
  line-height:1; cursor:pointer; padding:0 2px;}
.osNote .x:hover{color:#FAF8F2;}
@keyframes osNoteIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){.osNote{animation:none;}}