/* ==========================================================================
   system.css — NeXTSTEP interface primitives.

   The whole look comes from one rule: light falls from the top-left.
   Raised things get a white edge on top/left and a dark edge on bottom/right.
   Sunken things get the reverse. Everything else is Helvetica on 66% gray.
   ========================================================================== */

:root {
  /* the 2-bit palette, plus the two grays NeXT actually shipped */
  --gray:      #aaaaaa;   /* 66% white — the workstation gray */
  --gray-lt:   #c0c0c0;
  --gray-dk:   #8e8e8e;
  --hi:        #ffffff;   /* top-left bevel   */
  --lo:        #555555;   /* bottom-right bevel */
  --ink:       #000000;
  --paper:     #ffffff;

  /* the night side */
  --night:     #0a0b0d;
  --night-2:   #14171b;
  --amber:     #ff9b3f;
  --amber-dim: #b96f2c;
  --teal:      #5fb6b2;
  --bone:      #e8e4da;

  --ui:   "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
  --mono: "SF Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  --titlebar-h: 22px;
  --resize-h: 11px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--night);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   bevels
   -------------------------------------------------------------------------- */
.raised {
  background: var(--gray);
  border-top: 1px solid var(--hi);
  border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo);
  border-bottom: 1px solid var(--lo);
}
.sunken {
  background: var(--gray);
  border-top: 1px solid var(--lo);
  border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi);
  border-bottom: 1px solid var(--hi);
}

/* --------------------------------------------------------------------------
   windows
   -------------------------------------------------------------------------- */
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 260px; min-height: 140px;
  background: var(--gray);
  border: 1px solid var(--ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), 10px 14px 26px rgba(0,0,0,.55), 4px 5px 0 rgba(0,0,0,.28);
  animation: win-in .12s ease-out;
}
@keyframes win-in { from { transform: scale(.985); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .win { animation: none } }

.win-title {
  position: relative;
  flex: 0 0 var(--titlebar-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--gray);
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 1px 0 var(--hi);
  cursor: default;
  user-select: none;
  touch-action: none;
}
.win-title .tb-label {
  font-weight: 700; font-size: 12px; letter-spacing: .01em;
  color: var(--lo);
  padding: 0 34px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win.key .win-title .tb-label { color: var(--ink); }

/* NeXT put miniaturize on the left of the title bar and close on the right */
.tb-btn {
  position: absolute; top: 3px;
  width: 16px; height: 16px; padding: 0;
  background: var(--gray);
  border-top: 1px solid var(--hi); border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo);
  cursor: pointer;
}
.tb-btn:active { border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: var(--gray-dk); }
.tb-min { left: 3px; }
.tb-close { right: 3px; }
.tb-btn i {
  display: block; position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: center;
}
.tb-min i  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect x='3' y='6' width='8' height='3' fill='%23000'/%3E%3C/svg%3E"); }
.tb-close i{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3 3 L11 11 M11 3 L3 11' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.win:not(.key) .tb-btn i { opacity: .45; }

.win-body {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--gray);
}

/* the segmented resize bar along the bottom edge */
.win-resize {
  flex: 0 0 var(--resize-h);
  display: flex;
  background: var(--gray);
  border-top: 1px solid var(--hi);
  box-shadow: inset 0 -1px 0 var(--lo);
  cursor: ns-resize;
  touch-action: none;
}
.win-resize span { flex: 1 1 auto; }
.win-resize span.grip { flex: 0 0 26px; cursor: nwse-resize; }
.win-resize span.grip:last-child { cursor: nesw-resize; }
.win-resize span + span { border-left: 1px solid var(--lo); box-shadow: inset 1px 0 0 var(--hi); }

.win.minimized { display: none; }

/* --------------------------------------------------------------------------
   controls
   -------------------------------------------------------------------------- */
.btn {
  font-family: var(--ui); font-size: 12px; line-height: 1;
  padding: 5px 12px;
  background: var(--gray);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  cursor: pointer;
}
.btn:active, .btn[aria-pressed="true"] {
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
  background: var(--gray-dk);
}
.btn.default::after { content: " \21A9"; opacity: .7; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

.field {
  font-family: var(--ui); font-size: 12px;
  padding: 4px 5px;
  background: var(--paper); color: var(--ink);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
  outline-offset: -2px;
}
textarea.field { resize: none; font-family: var(--ui); }

.tag {
  display: inline-block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; padding: 1px 5px; margin-right: 4px;
  background: var(--gray-dk); color: var(--ink);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}

hr.rule { border: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); margin: 8px 0; }

/* --------------------------------------------------------------------------
   scrollers — NeXT put the scroll bar on the LEFT of the content
   (direction:rtl flips the native bar; the inner element flips text back)
   -------------------------------------------------------------------------- */
.scroller { overflow: auto; direction: rtl; scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt); }
.scroller > * { direction: ltr; }
.scroller::-webkit-scrollbar { width: 15px; height: 15px; }
.scroller::-webkit-scrollbar-track {
  background: var(--gray-lt);
  box-shadow: inset 1px 0 0 var(--lo), inset -1px 0 0 var(--hi);
}
.scroller::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-top: 1px solid var(--hi); border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo);
}

/* --------------------------------------------------------------------------
   the browser (Miller columns) — NeXT invented this; it is still the best way
   to walk a deep tree without scrolling
   -------------------------------------------------------------------------- */
.browser { display: flex; flex: 1 1 auto; min-height: 0; background: var(--gray); }
.browser .col {
  flex: 0 0 var(--colw, 196px);
  min-width: 0;
  border-right: 1px solid var(--lo);
  box-shadow: inset -1px 0 0 var(--hi);
  overflow-y: auto; overflow-x: hidden;
  direction: rtl;
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
}
.browser .col > * { direction: ltr; }
.browser .col::-webkit-scrollbar { width: 13px; }
.browser .col::-webkit-scrollbar-track { background: var(--gray-lt); }
.browser .col::-webkit-scrollbar-thumb {
  background: var(--gray);
  border: 1px solid var(--lo); border-top-color: var(--hi); border-left-color: var(--hi);
}
.browser .row {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 6px;
  font-size: 12px; line-height: 1.25;
  cursor: default; user-select: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser .row .nm { overflow: hidden; text-overflow: ellipsis; }
.browser .row .arrow { margin-left: auto; opacity: .75; font-size: 10px; }
.browser .row:hover { background: rgba(0,0,0,.06); }
.browser .row.sel { background: var(--ink); color: var(--paper); }   /* NeXT's inverted selection */
.browser .row.sel .arrow { color: var(--paper); }
.browser .ico { flex: 0 0 12px; height: 12px; opacity: .85; }

/* The workspace splits into a scrolling strip of columns and a content pane
   that never gets squeezed. Deep trees scroll the strip instead of stealing
   width from the thing you are actually reading. */
.browser-wrap { display: flex; flex: 1 1 auto; min-height: 0; }
.browser-wrap > .browser {
  flex: 0 1 auto; min-width: 0;
  max-width: calc(100% - 300px);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
}
.browser-wrap > .browser::-webkit-scrollbar { height: 11px; }
.browser-wrap > .browser::-webkit-scrollbar-track { background: var(--gray-lt); }
.browser-wrap > .browser::-webkit-scrollbar-thumb {
  background: var(--gray); border: 1px solid var(--lo);
  border-top-color: var(--hi); border-left-color: var(--hi);
}
.browser-wrap > .inspector {
  /* basis is FIXED, not content-derived: a wide document in the inspector
     must never be able to squeeze the column strip out of existence */
  flex: 1 1 300px; min-width: 300px;
  border-left: 1px solid var(--lo);
  box-shadow: inset 1px 0 0 var(--hi);
}

/* the pane on the right that describes whatever is selected */
.inspector {
  flex: 1 1 auto; min-width: 0;
  overflow: auto; direction: rtl;
  padding: 0;
  background: var(--gray);
  scrollbar-width: thin;
}
.inspector > * { direction: ltr; }
.inspector .pad { padding: 12px 14px 18px; }
.inspector h2 { font-size: 14px; margin: 0 0 2px; line-height: 1.3; }
.inspector h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
                margin: 14px 0 4px; color: var(--lo); }
.inspector p  { margin: 0 0 8px; line-height: 1.45; }
.inspector .meta { font-size: 12px; color: #2b2b2b; }
.inspector .empty { padding: 20px 14px; color: var(--lo); font-style: italic; }

/* a plain document surface for text files */
.doc {
  flex: 1 1 auto; overflow: auto; direction: rtl;
  background: var(--paper);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  scrollbar-width: thin;
}
.doc > * { direction: ltr; }
.doc .pad { padding: 16px 20px 24px; max-width: 62ch; }
.doc h1 { font-size: 16px; margin: 0 0 10px; }
.doc p, .doc li { line-height: 1.55; margin: 0 0 10px; }
.doc pre { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; margin: 0; line-height: 1.5; }

/* toolbars / shelves */
.shelf {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  background: var(--gray);
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 -1px 0 var(--hi);
  flex-wrap: wrap;
}
.shelf .spacer { flex: 1 1 auto; }
.shelf label { font-size: 11px; color: var(--lo); text-transform: uppercase; letter-spacing: .06em; }

.statusline {
  flex: 0 0 auto;
  padding: 3px 7px;
  font-size: 11px; color: var(--lo);
  border-top: 1px solid var(--lo);
  box-shadow: inset 0 1px 0 var(--hi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

a { color: #0d2f8f; }
a:hover { color: var(--ink); }