/* Oris Network — shared tokens + chrome (header, footer, eyebrow, status pills,
   page transition classes). Page-specific layout stays inline per page. */

:root{
  --ink: #14161B;
  --grey: #6B7280;
  --grey-light: #9CA3AF;
  --line: #E7E8EC;
  --paper: #FFFFFF;
  --red: #D6303F;
  --blue: #3167E0;
  --green: #1F9D6C;
  --red-tint: #FBEAEC;
  --blue-tint: #EAF0FD;
  --green-tint: #E8F7F0;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex; flex-direction:column;
}
.mono{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

header{
  display:flex; justify-content:space-between; align-items:center;
  padding: 30px 6vw;
}
.header-left{ display:flex; align-items:center; gap:18px; }

.menu-wrap{ position:relative; }

.menu-btn{
  position:relative; width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); cursor:pointer; flex:none; padding:0; font:inherit;
}
/* Absolutely-positioned bars — exact pixel math instead of flex gap, so
   nothing can throw the spacing off across browsers. 38px box, 16px bars,
   centered horizontally (11 + 16 + 11 = 38); vertically 12/18/24 (2px bar
   + 4px gap repeating, whole 14px group centered in 38px). */
.menu-btn span{
  position:absolute; left:11px; width:16px; height:2px; background:var(--ink); border-radius:1px;
}
.menu-btn span:nth-child(1){ top:12px; }
.menu-btn span:nth-child(2){ top:18px; }
.menu-btn span:nth-child(3){ top:24px; }
.menu-btn:hover{ border-color:var(--ink); background:#FAFAFB; }
.menu-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.menu-dropdown{
  position:absolute; top:calc(100% + 10px); left:0; z-index:100;
  min-width:210px; background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:8px; box-shadow:0 16px 36px rgba(20,22,27,0.14);
  display:flex; flex-direction:column; gap:2px;
}
.menu-dropdown[hidden]{ display:none; }
.menu-dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:8px; text-decoration:none;
  color:var(--ink); font-size:14px; font-weight:500;
}
.menu-dropdown a:hover{ background:#F5F6F8; }
.menu-dropdown a .dot{
  width:6px; height:6px; border-radius:50%; background:var(--line); flex:none;
}
.menu-dropdown a.current{ color:var(--blue); font-weight:700; }
.menu-dropdown a.current .dot{ background:var(--blue); }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand img{ width:32px; height:32px; }
.brand .name{ font-weight:800; font-size:18px; line-height:1; }
.brand .sub{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.14em; color:var(--grey-light); margin-top:3px; }

nav a{
  color: var(--grey); text-decoration:none; font-size:14px; font-weight:500;
  margin-left:26px;
}
nav a:hover{ color: var(--ink); }

main{ flex:1; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; color:var(--blue); font-weight:600;
}
.eyebrow .bar{ width:22px; height:2px; background:var(--red); display:inline-block; }

footer{
  text-align:center; padding:26px 6vw 34px; font-size:12px; color:var(--grey-light);
  border-top:1px solid var(--line);
}

/* Status pills — dot color follows text color via currentColor */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.08em;
  padding:5px 10px; border-radius:20px;
}
.pill::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.pill-live{     color:var(--red);   background:var(--red-tint); }
.pill-progress{ color:var(--blue);  background:var(--blue-tint); }
.pill-done{     color:var(--green); background:var(--green-tint); }
.pill-planned{  color:var(--grey);  background:#F3F4F6; }

/* Fake "zoom" page transition — see /js/transition.js.
   #page is the single wrapper each template animates as a whole. */
#page{ transition: opacity .25s ease, transform .25s ease; }
#page.page-exit{ opacity:0; transform:scale(1.06); }
#page.page-enter{ opacity:0; transform:scale(0.97); }

@media (prefers-reduced-motion: reduce){
  #page{ transition:none; }
}