/* File: /var/www/bobbipierce.com/html/css/style.css
 * Purpose: Fixed header/footer, responsive tiles, Quick Peek fills remaining height, jQuery UI dialog skin, subtle Pi zone.
 */
:root{
  --bg:#07060a;
  --ink:#b6fff0;
  --muted:rgba(182,255,240,.72);
  --edge2:rgba(255,255,255,.06);
  --accent:#ff7b2f;
  --h:64px; --f:52px;
  --radius:18px;
  --shadow:0 18px 48px rgba(0,0,0,.42);
  --font: Arial, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body.bp{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); overflow:hidden; }

.bp-header{
  position:fixed; top:0; left:0; right:0; height:var(--h);
  display:flex; align-items:center; gap:14px; padding:10px 14px;
  background:linear-gradient(180deg, rgba(12,10,18,.92), rgba(10,8,14,.86));
  border-bottom:1px solid var(--edge2); z-index:30; backdrop-filter: blur(8px);
}
.bp-footer{
  position:fixed; left:0; right:0; bottom:0; height:var(--f);
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  background:linear-gradient(0deg, rgba(12,10,18,.92), rgba(10,8,14,.86));
  border-top:1px solid var(--edge2); z-index:30; backdrop-filter: blur(8px);
}
.bp-main{
  position:fixed; top:var(--h); bottom:var(--f); left:0; right:0;
  overflow:auto; padding:18px;
  display:flex; flex-direction:column; gap:14px;
}
.bp-brand-title{ font-weight:800; color:var(--accent); font-size:18px; line-height:1; }
.bp-brand-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.bp-user{ margin-left:auto; display:flex; align-items:center; gap:10px; font-size:14px; }
.bp-user-label{ opacity:.9; }

.bp-btn{
  border:1px solid rgba(182,255,240,.14);
  background:rgba(255,255,255,.06);
  color:var(--ink); padding:8px 12px; border-radius:12px; cursor:pointer;
}
.bp-btn:hover{ background:rgba(255,255,255,.09); }
.bp-btn-ghost{ background:transparent; }

.bp-icon-btn{
  width:42px; height:42px; border-radius:14px;
  border:1px solid var(--edge2);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.bp-burger{ display:block; width:18px; height:12px; margin:0 auto; position:relative; }
.bp-burger::before,.bp-burger::after,.bp-burger span{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:rgba(182,255,240,.85); border-radius:4px;
}
.bp-burger::before{ top:0; } .bp-burger::after{ bottom:0; } .bp-burger span{ top:5px; }

.bp-tiles{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.bp-tile{
  border:1px solid var(--edge2);
  background:linear-gradient(180deg, rgba(23,20,35,.92), rgba(18,16,28,.92));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 16px 14px;
  text-align:left;
  cursor:pointer;
  display:flex; flex-direction:column; gap:8px;
  min-height:120px;
  max-width:420px; width:100%; justify-self:center;
}
.bp-tile-icon{ font-size:24px; opacity:.95; }
.bp-tile-title{ font-size:18px; font-weight:800; color:var(--accent); }
.bp-tile-sub{ font-size:12px; color:var(--muted); line-height:1.2; }

.bp-muted{ color:var(--muted); }
.bp-grow{ flex:1 1 auto; min-height:260px; display:flex; }
.bp-panel{ border:1px solid var(--edge2); background:linear-gradient(180deg, rgba(23,20,35,.92), rgba(18,16,28,.92)); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.bp-panel-wide{ flex:1 1 auto; display:flex; flex-direction:column; }
.bp-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--edge2); }
.bp-panel-title{ font-weight:900; color:var(--accent); }
.bp-panel-body{ padding:14px; flex:1 1 auto; overflow:auto; }

.bp-pill{ border:1px solid var(--edge2); background:rgba(255,255,255,.04); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:12px; }
.bp-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:rgba(182,255,240,.35); margin:0 6px 1px 6px; vertical-align:middle; }

.ui-dialog{ border-radius:16px !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 22px 70px rgba(0,0,0,.55) !important; overflow:hidden; }
.ui-dialog .ui-dialog-titlebar{ background:rgba(23,20,35,.96) !important; border:0 !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
.ui-dialog .ui-dialog-title{ color:var(--accent) !important; font-weight:900 !important; }
.ui-dialog .ui-dialog-content{ background:rgba(10,8,14,.98) !important; color:rgba(182,255,240,.92) !important; }
.ui-widget-overlay{ background:rgba(0,0,0,.62) !important; }

@media (max-width: 700px){
  :root{ --h:58px; --f:56px; }
  .bp-brand-sub{ display:none; }
  .bp-tile{ min-height:108px; }
}

/* Pi zone: intentionally near-invisible corner affordance */
#bpPiZone{
  position:fixed; right:0; bottom:0; width:44px; height:44px; z-index:60; background:transparent;
}
#bpPiZone::after{
  content:""; position:absolute; right:7px; bottom:7px; width:2px; height:2px;
  background:rgba(182,255,240,.10); border-radius:2px;
}