/* ==========================================================================
   app-prefs.css — Preferences.

   The strip along the top is the whole NeXT idea of a preferences window:
   big, square, obviously pressable icons, and the pane below simply swaps.
   Selection inverts to solid black, like every other selection on this
   machine.
   ========================================================================== */

/* ------------------------------------------------------------------- strip */
.pstrip {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 7px 7px 8px;
  background: var(--gray);
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 -1px 0 var(--hi);
}
.picon {
  flex: 0 0 auto;
  width: 76px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 5px;
  background: var(--gray); color: var(--ink);
  border: 0;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  font: inherit; font-size: 11px; letter-spacing: .02em;
  cursor: pointer;
}
.picon:active { box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.picon[aria-pressed="true"] {
  background: var(--ink); color: var(--paper);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 #2a2a2a;
}
.picon:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* -------------------------------------------------------------------- pane */
.ppane {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; direction: rtl;             /* scrollbar on the left */
  background: var(--gray);
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
}
.ppane > * { direction: ltr; }
.ppane::-webkit-scrollbar { width: 15px; }
.ppane::-webkit-scrollbar-track {
  background: var(--gray-lt);
  box-shadow: inset 1px 0 0 var(--lo), inset -1px 0 0 var(--hi);
}
.ppane::-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);
}
.ppane .pad { padding: 12px 14px 20px; }
.ppane h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 10px; color: var(--lo);
}
.ppane .rule { margin: 14px 0 12px; }

/* ------------------------------------------------------------------- rows */
.ppane .prow {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 12px;
}
.ppane .plab { flex: 0 0 150px; padding-top: 3px; }
.ppane .plab span { display: block; font-size: 12px; }
.ppane .plab em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 10.5px; line-height: 1.35; color: var(--lo);
}
.ppane .pctl {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.ppane .prow.buttons .pctl { padding-top: 2px; }
.ppane .pread { font-family: var(--mono); font-size: 11px; color: var(--lo); }

/* a two-state control reads as a pair, so the chosen half has to sit down
   harder than an ordinary pressed button does */
.ppane .pctl .btn[aria-pressed="true"] {
  background: var(--gray-dk);
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi);
}

.ppane .facts {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  font-family: var(--mono); font-size: 11px;
  margin: 8px 0 4px;
}
.ppane .facts.wide { grid-template-columns: 118px 1fr; gap: 3px 12px; }
.ppane .facts dt { color: var(--lo); }
.ppane .facts dd { margin: 0; word-break: break-word; }

.ppane .pmeta { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--lo); }
.ppane .pflat {
  margin: 0 0 12px; max-width: 54ch;
  font-size: 12px; line-height: 1.5;
}

/* ------------------------------------------------------------------ slider */
.pslider {
  flex: 1 1 150px; max-width: 210px; min-width: 90px;
  height: 18px; margin: 0; padding: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
}
.pslider:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pslider::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--gray-dk);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
}
.pslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 18px; margin-top: -7px;
  background: var(--gray);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  border: 0;
}
.pslider::-moz-range-track {
  height: 6px;
  background: var(--gray-dk);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
}
.pslider::-moz-range-thumb {
  width: 11px; height: 18px; border-radius: 0; border: 0;
  background: var(--gray);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}

/* ---------------------------------------------------------------- progress */
.pbar {
  height: 12px; margin: 4px 0 8px; max-width: 340px;
  background: var(--gray-dk);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
  overflow: hidden;
}
.pbar i {
  display: block; width: 0; height: 100%;
  background: var(--amber-dim);
  box-shadow: inset 0 1px 0 rgba(255, 176, 94, .6);
  transition: width .14s linear;
}
@media (prefers-reduced-motion: reduce) {
  .pbar i { transition: none; }
}

/* -------------------------------------------------------------- the tint
   The Display pane's sliders no longer have rules of their own: they turn the
   same dials config/effects.js does, through FX, so drift and the photograph
   still move underneath whatever strength was asked for.                   */

@media (max-width: 460px) {
  .picon { width: calc(50% - 3px); flex-direction: row; justify-content: flex-start; gap: 7px; padding-left: 8px; }
  .ppane .prow { flex-direction: column; gap: 4px; }
  .ppane .plab { flex: 0 0 auto; }
  .ppane .facts.wide { grid-template-columns: 1fr; }
  .ppane .facts.wide dd { margin: 0 0 4px; }
}