/* App styles on top of terminal-workbench tokens. All colors come from tokens.css. */

@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

* { box-sizing: border-box; }
html { height: 100%; }

/* ---- scrollbars (Firefox, then WebKit/Blink) ---- */
* { scrollbar-width: thin; scrollbar-color: var(--twb-bg-4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--twb-bg-4); border-radius: var(--twb-radius-pill);
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--twb-border-strong); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
body {
  margin: 0; min-height: 100%;
  background: var(--twb-bg-0); color: var(--twb-text-normal);
  font-family: "JetBrains Mono", var(--twb-font-mono);
  font-size: 14px; line-height: var(--twb-line-height);
}
a { color: var(--twb-accent-alt); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--twb-selection); }
:focus-visible { outline: 2px solid var(--twb-focus-ring); outline-offset: 1px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 8px 14px; background: var(--twb-bg-2); color: var(--twb-accent);
  border: 1px solid var(--twb-accent); border-radius: var(--twb-radius-s);
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- header (man page views) ---- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  background: var(--twb-bg-1); border-bottom: var(--twb-border-width) solid var(--twb-border);
}
.brand { color: var(--twb-text-normal); font-weight: 700; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-accent { color: var(--twb-accent); }

/* ---- search ---- */
.search-wrap { position: relative; flex: 1; max-width: 560px; display: flex; align-items: center; }
.prompt-char {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--twb-accent); user-select: none; pointer-events: none; z-index: 1;
}
#search {
  flex: 1; padding: 6px 10px 6px 30px;
  background: var(--twb-bg-0); color: var(--twb-text-normal);
  border: var(--twb-border-width) solid var(--twb-border);
  border-radius: var(--twb-radius-s);
  font: inherit; caret-color: var(--twb-accent);
}
#search:focus { border-color: var(--twb-accent); outline: none; }
#search::placeholder { color: var(--twb-text-faint); }
#results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  max-height: 60vh; overflow-y: auto;
  background: var(--twb-bg-2); border: var(--twb-border-width) solid var(--twb-border-strong);
  border-radius: var(--twb-radius-m); box-shadow: var(--twb-shadow-pane);
}
#results li a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 10px; border-radius: var(--twb-radius-s);
  color: var(--twb-text-normal); text-decoration: none;
}
#results li a:hover, #results li.sel a { background: var(--twb-active-line); }
#results li.sel a { outline: 1px solid var(--twb-accent); }
.r-name { font-weight: 700; white-space: nowrap; }
.r-name mark { background: var(--twb-highlight); color: inherit; border-radius: 2px; }
.r-desc { color: var(--twb-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.badge {
  font-size: 11px; padding: 0 7px; border-radius: var(--twb-radius-pill);
  background: var(--twb-tag-bg); border: 1px solid var(--twb-tag-border);
  color: var(--twb-text-muted); white-space: nowrap;
}
.badge.s1 { color: var(--twb-accent); }
.badge.s2 { color: var(--twb-accent-alt); }
.badge.s3 { color: var(--twb-violet); }
.badge.s4 { color: var(--twb-orange); }
.badge.s5 { color: var(--twb-warm); }
.badge.s6 { color: var(--twb-accent); }
.badge.s7 { color: var(--twb-accent-alt); }
.badge.s8 { color: var(--twb-red); }
.nav-link { color: var(--twb-text-muted); font-size: 13px; white-space: nowrap; }
.nav-link:hover { color: var(--twb-accent); text-decoration: none; }
.listing .listing-list { list-style: none; padding: 0; columns: 2; column-gap: 40px; }
.listing .listing-list li { padding: 2px 0; break-inside: avoid; }
.listing .listing-sections { columns: 1; }
.listing .l-desc { color: var(--twb-text-muted); font-size: 12px; }
@media (max-width: 760px) { .listing .listing-list { columns: 1; } }
#theme-toggle {
  margin-left: auto; padding: 4px 10px; cursor: pointer;
  background: var(--twb-bg-2); color: var(--twb-text-muted);
  border: var(--twb-border-width) solid var(--twb-border);
  border-radius: var(--twb-radius-s); font: inherit;
}
#theme-toggle:hover { color: var(--twb-text-normal); border-color: var(--twb-border-strong); }

/* ---- home hero ---- */
.home .hero {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px;
}
.hero-title { font-size: 42px; margin: 0; font-weight: 700; letter-spacing: -1px; }
.hero-search { flex: none; width: 100%; max-width: 640px; } /* flex:1 from .search-wrap would stretch vertically in the hero column */
.hero-search #search { padding: 10px 14px 10px 36px; font-size: 16px; }
.hero-search .prompt-char { left: 14px; font-size: 16px; }
.hints { color: var(--twb-text-faint); font-size: 12px; }
.hints kbd {
  background: var(--twb-tag-bg); border: 1px solid var(--twb-tag-border);
  border-radius: var(--twb-radius-s); padding: 1px 6px; font: inherit;
}
.home #theme-toggle { position: fixed; top: 12px; right: 12px; margin: 0; }
.recent { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 640px; justify-content: center; }
.recent-label { color: var(--twb-text-faint); font-size: 12px; }
.recent-chip {
  font-size: 12px; padding: 2px 10px; color: var(--twb-text-soft);
  background: var(--twb-tag-bg); border: 1px solid var(--twb-tag-border);
  border-radius: var(--twb-radius-pill);
}
.recent-chip:hover { color: var(--twb-accent); text-decoration: none; border-color: var(--twb-accent); }

/* ---- man page layout ---- */
.page { display: flex; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
.toc { width: 210px; flex-shrink: 0; position: sticky; top: 64px; align-self: flex-start;
  max-height: calc(100vh - 90px); overflow-y: auto; }
.toc-title { font-weight: 700; color: var(--twb-accent); margin-bottom: 8px; word-break: break-all; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--twb-border); }
.toc li a { display: block; padding: 3px 10px; color: var(--twb-text-muted); font-size: 12.5px; }
.toc li a:hover { color: var(--twb-text-normal); text-decoration: none; background: var(--twb-active-line); }
.man-content { flex: 1; min-width: 0; }
.page-foot { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--twb-border);
  color: var(--twb-text-faint); font-size: 12px; }
@media (max-width: 760px) { .page { flex-direction: column; } .toc { position: static; width: auto; max-height: none; } }

/* ---- mandoc output styling ---- */
.man-content table.head, .man-content table.foot { width: 100%; color: var(--twb-text-faint); font-size: 12px; border-collapse: collapse; }
.man-content .head-vol, .man-content .foot-os { text-align: center; }
.man-content .head-rtitle, .man-content .foot-date { text-align: right; }
.man-content h1.Sh, .man-content h1 { font-size: 15px; color: var(--twb-accent); margin: 26px 0 8px; letter-spacing: 0.5px; }
.man-content h2.Ss, .man-content h2 { font-size: 14px; color: var(--twb-text-normal); margin: 20px 0 6px; }
.man-content a.permalink { color: inherit; }
.man-content .Nm, .man-content b, .man-content strong { color: var(--twb-text-normal); font-weight: 700; }
.man-content .Fl, .man-content .Cm, .man-content .Ic { color: var(--twb-warm); font-weight: 700; }
.man-content .Ar, .man-content var, .man-content i, .man-content em { color: var(--twb-accent-alt); font-style: italic; }
.man-content .Pa, .man-content .Ev { color: var(--twb-violet); }
.man-content a.Xr { color: var(--twb-accent); }
.man-content span.Xr { color: var(--twb-text-normal); }
.man-content pre, .man-content .Bd-indent {
  background: var(--twb-bg-1); border: 1px solid var(--twb-border);
  border-radius: var(--twb-radius-m); padding: 10px 14px;
  overflow-x: auto; line-height: var(--twb-line-height-code);
}
.man-content pre.plain-roff { white-space: pre-wrap; }
.man-content dl.Bl-tag > dt { font-weight: 700; margin-top: 10px; }
.man-content dl.Bl-tag > dd { margin-left: 24px; }
.man-content table { border-collapse: collapse; }
.man-content table.tbl { display: block; max-width: 100%; overflow-x: auto; } /* wide tables scroll instead of overflowing the page */
.man-content table.tbl td, .man-content table.tbl th { border: 1px solid var(--twb-border); padding: 3px 8px; }
.man-content .manual-text { max-width: 84ch; }

/* ---- print ---- */
@media print {
  .site-header, .toc, #results, #theme-toggle, #pet-open, #pet-panel,
  #site-pet, .hints, .recent, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .page { display: block; max-width: none; padding: 0; }
  .man-content { max-width: none; }
  .man-content h1, .man-content h1.Sh { color: #000; }
  .man-content pre, .man-content .Bd-indent { background: #fff; border: 1px solid #888; }
  a, .man-content a.Xr { color: #000; text-decoration: none; }
}