/* hawkkit.css — shared site chrome for hawktalk.ai
   Loaded last on every page so it wins over each page's inline styles.
   Two jobs: the 70% width standard, and the terminal window controls. */

/* ---------- 1. width standard: content occupies 70% of the viewport ---------- */

:root{
  --hk-width: 70vw;
  --max: 70vw;          /* some pages drive their container off --max */
}

.wrap, .term, .shell, .page, .container, .doc-wrap, .frame{
  max-width: var(--hk-width) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* laptops and below: stop wasting the screen on margins */
@media (max-width: 1400px){
  :root{ --hk-width: 82vw; --max: 82vw; }
}
@media (max-width: 1000px){
  :root{ --hk-width: 92vw; --max: 92vw; }
}
@media (max-width: 680px){
  :root{ --hk-width: 100%; --max: 100%; }
}

/* prose stays readable even inside a wide shell — long measures hurt */
.wrap p, .wrap li, .doc p, .doc li{ max-width: 92ch; }

/* ---------- 2. window controls: minimise / maximise / close ---------- */

.titlebar .wbtns{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.titlebar .wbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 15px;
  border-radius: 3px;
  border: 1px solid rgba(18, 75, 48, .75);
  background: rgba(6, 16, 9, .55);
  color: #5f8f79;
  font: 400 10px/1 var(--mono, ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace);
  letter-spacing: 0;
  cursor: default;
  user-select: none;
  transition: color .14s, border-color .14s, box-shadow .14s, background .14s;
}

.titlebar .wbtn:hover{
  color: #3dff9e;
  border-color: #3dff9e;
  background: rgba(10, 26, 18, .8);
  box-shadow: 0 0 7px rgba(61, 255, 158, .32);
}

/* close is the one that reads hot */
.titlebar .wbtn.cls:hover{
  color: #ff6b60;
  border-color: #ff6b60;
  box-shadow: 0 0 7px rgba(255, 107, 96, .32);
}

/* kill the old traffic lights wherever they survive */
.titlebar .dot{ display: none !important; }

/* ---------- 2b. compact status strip ---------- */

.status{
  display: inline-flex !important;
  align-items: center;
  gap: .5em;
  margin-top: 18px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(255, 206, 106, .45) !important;
  border-left: 2px solid #ffce6a !important;
  border-radius: 5px !important;
  background: rgba(40, 30, 8, .2) !important;
  color: #6f927f !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
}
.status b{ color: #ffce6a !important; font-weight: 600; }

/* ---------- 3. tier buttons on the homepage API section ---------- */

.tierbtn{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: 14px;
  padding: 8px 15px;
  border: 1px solid #1f9a63;
  border-radius: 6px;
  background: rgba(10, 26, 18, .55);
  color: #3dff9e;
  font: 500 13px/1 var(--mono, ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace);
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, border-color .15s, transform .15s;
}
.tierbtn:hover{
  background: rgba(16, 44, 30, .9);
  border-color: #3dff9e;
  box-shadow: 0 0 12px rgba(61, 255, 158, .28);
  transform: translateY(-1px);
}
.tierbtn .ar{ transition: transform .15s; }
.tierbtn:hover .ar{ transform: translateX(3px); }

@media (prefers-reduced-motion: reduce){
  .tierbtn, .tierbtn .ar{ transition: none; }
  .tierbtn:hover{ transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .titlebar .wbtn{ transition: none; }
}