/* Left sidebar: logo, nav, status widget, contact line.
   Also the top-level .page grid and .main wrapper. */

.page{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

.sidebar{
  border-right:3px solid var(--ink);
  padding:20px 24px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.side-top .logo{
  font-family:'Archivo Black', sans-serif;
  font-size:20px;
  text-transform:uppercase;
  margin-bottom:24px;
}

/* Wraps nav + side-mid + side-bottom. On desktop this just fills the
   remaining sidebar height and distributes its children with
   space-between -- identical to the original layout, where .sidebar
   itself did that job directly. On mobile (see responsive.css) this
   becomes an absolutely-positioned overlay panel instead. */
.sidebar-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:20px;
}
.sidebar-body::-webkit-scrollbar{
  display:none;                /* Chrome, Brave, Safari, new Edge */
}
.sidebar nav ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.sidebar nav a{
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.sidebar nav a:hover{border-bottom-color:var(--red);}

.side-mid{
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  padding:12px 0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.status-anchor{
  position:relative;
}

.status-widget{margin-bottom:0;cursor:default;display:flex;align-items:center;flex-wrap:wrap;gap:2px;}

.status-msg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-left:4px;
  border:none;
  background:none;
  color:var(--ink);
  opacity:0.6;
  cursor:pointer;
  padding:0;
  animation:envelope-attention 3s ease-in-out infinite;
}
.status-msg-btn:hover{opacity:1;}
.status-msg-btn svg{width:13px;height:13px;display:block;}
@keyframes envelope-attention{
  0%, 88%{transform:scale(1) rotate(0deg);}
  91%{transform:scale(1.2) rotate(-8deg);}
  94%{transform:scale(0.92) rotate(6deg);}
  100%{transform:scale(1) rotate(0deg);}
}
@keyframes envelope-pop{
  0%{transform:scale(1) rotate(0deg);}
  35%{transform:scale(1.2) rotate(-8deg);}
  65%{transform:scale(0.92) rotate(5deg);}
  100%{transform:scale(1) rotate(0deg);}
}
.status-msg-btn.is-animating svg{
  animation:envelope-pop .45s ease;
}

.status-msg-popup{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  z-index:30;
  border:2px solid var(--ink);
  background:var(--paper);
  padding:12px 14px;
  box-shadow:4px 4px 0 var(--ink);
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.status-msg-popup[hidden]{display:none;}
.status-msg-popup.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.status-msg-popup p{
  font-size:12px;
  line-height:1.5;
  opacity:0.85;
}
.status-widget .dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  margin-right:6px;
}
.dot--open{background:var(--red);animation:blink 1.6s steps(1) infinite;}
.dot--busy{background:var(--caution);animation:none;}
.dot--unavailable{background:var(--ink);opacity:0.4;animation:none;}
@keyframes blink{ 50%{opacity:0.2;} }
.clock-widget{color:var(--ink);opacity:0.7;}

/* ============================================
   STATUS EDITOR — hidden owner-only control,
   revealed by triple-clicking .status-widget.
   Backed by Supabase (see js/status.js).
   ============================================ */
.status-editor{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  z-index:30;
  border:2px solid var(--ink);
  padding:10px;
  background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);
}
.status-editor_form{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.status-editor_form[hidden]{display:none;}
.status-editor_form input{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  padding:6px 8px;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
}

.status-editor_pwd-row{
  position:relative;
  display:flex;
}
.status-editor_pwd-row input{
  flex:1;
  padding-right:32px;
}
.status-editor_pwd-toggle{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:none;
  color:var(--ink);
  opacity:0.6;
  cursor:pointer;
  padding:0;
}
.status-editor_pwd-toggle:hover{opacity:1;}
.status-editor_pwd-toggle svg{
  width:14px;
  height:14px;
  display:block;
}
.status-editor_pwd-toggle svg[hidden]{display:none;}
.status-editor_form button{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:6px 8px;
  border:2px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  cursor:pointer;
}
.status-editor_form button:hover{background:var(--red);border-color:var(--red);}
.status-editor_msg{
  font-size:10px;
  color:var(--red);
  min-height:12px;
}
.status-editor_picker{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.status-editor_picker[hidden]{display:none;}
.status-opt{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  text-align:left;
  padding:6px 8px;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.status-opt:hover{background:var(--ink);color:var(--paper);}

.side-bottom{
  font-size:12px;
  padding-top:12px;
}
.side-bottom p{
  text-transform:uppercase;
  letter-spacing:0.04em;
  opacity:0.7;
  margin-bottom:8px;
  font-size:11px;
}
.side-bottom a{
  text-decoration:none;
  border-bottom:2px solid var(--red);
  font-size:13px;
  word-break:break-all;
}

.main{
  padding:0;
  overflow-x:hidden;
}

section{
  border-bottom:3px solid var(--ink);
  padding:60px 48px;
}


/* ============================================
   INTERACTIVE SIDEBAR — hover states + scrollspy
   active state. Append this block to the end of
   css/sidebar.css.
   ============================================ */

/* nav links: hard block slides in behind the text on hover,
   or permanently when scrollspy marks it .active */
.sidebar nav a{
  position:relative;
  display:block;
  padding:6px 8px;
  margin:0 -8px;
  overflow:hidden;
  z-index:1;
  transition:color .25s ease, padding-left .25s cubic-bezier(.2,.8,.2,1);
}
.sidebar nav a::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.sidebar nav a:hover,
.sidebar nav a.active{
  color:var(--paper);
  border-bottom-color:transparent;
  padding-left:16px;
}
.sidebar nav a:hover::before,
.sidebar nav a.active::before{
  transform:scaleX(1);
}
.sidebar nav a.active::after{
  content:"—";
  position:absolute;
  right:8px;
  color:var(--red);
  font-weight:700;
}

/* logo: small brutalist punch on hover */
.side-top .logo{
  display:inline-block;
  transition:transform .15s ease, color .15s ease;
}
.side-top .logo:hover{
  transform:translate(3px,-2px);
  color:var(--red);
}

/* status widget: dot gets a hard ring on hover, just enough
   feedback to read as "alive" without being distracting */
.status-widget{
  transition:transform .15s ease;
}
.status-widget:hover .dot{
  box-shadow:0 0 0 4px rgba(255,59,31,0.25);
}

/* email link at bottom of sidebar: offset "stamp" hover,
   snaps back on click */
.side-bottom a{
  position:relative;
  display:inline-block;
  transition:transform .15s ease, box-shadow .15s ease;
}
.side-bottom a:hover{
  transform:translate(-3px,-3px);
  box-shadow:3px 3px 0 var(--red);
}
.side-bottom a:active{
  transform:translate(0,0);
  box-shadow:none;
}

@media (max-width:900px){
  .sidebar nav a.active::after{content:none;}
  .sidebar nav a:hover,
  .sidebar nav a.active{padding-left:8px;}
}


/* ============================================
   SOCIAL ICON ROW — brutalist square icon buttons.
   Append this block to the end of css/sidebar.css
   (after the interactive-sidebar block you already
   added).
   ============================================ */

.live-presence{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.live-presence[hidden]{display:none;}
.live-presence_avatars{
  display:flex;
}
.live-avatar{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid var(--paper);
  margin-left:-8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:9px;
  font-weight:700;
  overflow:hidden;
  flex-shrink:0;
}
.live-avatar:first-child{margin-left:0;}
.live-avatar svg{width:12px;height:12px;}
.live-avatar--extra{
  background:var(--ink);
  color:var(--paper);
}
.live-presence_text{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  opacity:0.8;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}
.live-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1FA24B;
  animation:blink 1.6s steps(1) infinite;
}

.social-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.social-row a{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  position:relative;
  transition:background .2s ease, color .2s ease, transform .15s ease, box-shadow .15s ease;
}

/* hover/focus tooltip -- a real element (not ::after) so
   js/tooltip-position.js can measure it and flip its alignment
   near the edges of the screen. Centered by default. */
.icon-tip{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translate(-50%,4px);
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo Black', sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:5px 10px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  border:2px solid var(--red);
  transition:opacity .2s ease, transform .2s ease;
  z-index:5;
}
.icon-tip.tip-left{ left:0; transform:translate(0,4px); }
.icon-tip.tip-right{ left:auto; right:0; transform:translate(0,4px); }

.social-row a:hover .icon-tip,
.social-row a:focus-visible .icon-tip{
  opacity:1;
  transform:translate(-50%,0);
}
.social-row a:hover .icon-tip.tip-left,
.social-row a:focus-visible .icon-tip.tip-left,
.social-row a:hover .icon-tip.tip-right,
.social-row a:focus-visible .icon-tip.tip-right{
  transform:translate(0,0);
}
.social-row a svg{
  width:14px;
  height:14px;
  fill:currentColor;
  display:block;
}
.social-row a:hover{
  background:var(--ink);
  color:var(--paper);
  transform:translate(-2px,-2px);
  box-shadow:2px 2px 0 var(--red);
}
.social-row a:active{
  transform:translate(0,0);
  box-shadow:none;
}

@media (max-width:900px){
  .social-row{margin-bottom:0;}
}

/* ============================================
   THEME SWITCHER — square, brutalist version of
   the pill switcher. Append this block to the
   end of css/sidebar.css.
   ============================================ */

.theme-switcher{
  display:flex;
  gap:2px;
  border:2px solid var(--ink);
  padding:2px;
  width:fit-content;
  margin-top:10px;
}
.theme-switcher_switch{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.theme-switcher_switch:hover .icon-tip,
.theme-switcher_switch:focus-visible .icon-tip{
  opacity:1;
  transform:translate(-50%,0);
}
.theme-switcher_switch .icon{
  width:14px;
  height:14px;
  display:block;
}
.theme-switcher_switch:hover{
  background:var(--red);
  color:var(--paper);
}
.theme-switcher_switch[data-active="true"]{
  background:var(--ink);
  color:var(--paper);
}
.theme-switcher_switch:active{
  background:var(--ink);
  color:var(--paper);
}

/* ============================================
   SFX TOGGLE — persistent mute/unmute control
   for uisfx sound effects. See js/sfx.js.
   ============================================ */
.sfx-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  border:2px solid var(--ink);
  padding:5px 8px;
  width:fit-content;
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  transition:background .15s ease, color .15s ease;
}
.sfx-toggle:hover{background:var(--red);color:var(--paper);border-color:var(--red);}
.sfx-toggle[aria-pressed="false"]{opacity:0.5;}
.sfx-toggle svg{width:13px;height:13px;display:block;}
.sfx-toggle .icon-sfx-off{display:none;}
.sfx-toggle[data-muted="true"] .icon-sfx-on{display:none;}
.sfx-toggle[data-muted="true"] .icon-sfx-off{display:block;}
.side-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:0.5;
  margin-top:12px;
  margin-bottom:6px;
}

.resume-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:10px;   /* galing 18px */
  border:2px solid var(--ink);
  padding:5px 9px;      /* konting bawas din sa padding */
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.resume-btn svg{
  width:13px;
  height:13px;
  fill:currentColor;
  display:block;
}
.resume-btn:hover{
  background:var(--ink);
  color:var(--paper);
  transform:translate(-2px,-2px);
  box-shadow:2px 2px 0 var(--red);
}
.resume-btn:active{
  transform:translate(0,0);
  box-shadow:none;
}