/* ---------------------------------------------------------------------------
   WFetch — period-accurate Win32 dialog chrome for /wfetch.
   Everything is scoped under .wf so none of it touches the site's design system.
   Deliberately fixed (not theme-aware): the whole point is that it looks like a
   Windows 2000/XP classic dialog in both light and dark site themes.
   Palette: ButtonFace #d4d0c8, ButtonShadow #808080, ButtonHighlight #ffffff,
   ButtonDarkShadow #404040 — the classic 3D bevel quartet.
   --------------------------------------------------------------------------- */

.wf {
  --face:    #d4d0c8;
  --hi:      #ffffff;
  --shadow:  #808080;
  --dark:    #404040;
  --field:   #ffffff;
  --text:    #000000;
  --title-a: #0a246a;   /* classic gradient title bar */
  --title-b: #a6caf0;

  font-family: Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
  background: var(--face);
  border: 1px solid var(--dark);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--shadow), 3px 3px 10px rgba(0,0,0,.35);
  min-width: 700px;
  user-select: none;
}

/* ------------------------------- title bar ------------------------------- */
.wf-title {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #fff; font-weight: 700; padding: 3px 4px 3px 3px; margin: 2px;
}
.wf-title-text { display: flex; align-items: center; gap: 5px; letter-spacing: .2px; }
.wf-title-ico {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  background: #c0c0c0; color: #000; font-size: 10px; font-weight: 700;
  border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff;
}
.wf-title-btns { display: flex; gap: 2px; }
.wf-title-btns i {
  font-style: normal; display: grid; place-items: center;
  width: 16px; height: 14px; background: var(--face); color: #000; font-size: 9px;
  border: 1px solid var(--dark);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--shadow);
}

.wf-body { padding: 8px; }

/* --------------------------- grouped fieldsets --------------------------- */
.wf-cols { display: flex; gap: 8px; align-items: stretch; }
.wf-cols > .wf-group { flex: 1 1 0; min-width: 0; }

.wf-group {
  border: 1px solid var(--shadow);
  box-shadow: 1px 1px 0 var(--hi) inset, -1px -1px 0 var(--hi);
  padding: 6px 8px 8px;
  margin: 0 0 8px;
  min-width: 0;
}
.wf-group > legend { padding: 0 4px; font-size: 11px; }

/* ------------------------------- form rows ------------------------------- */
.wf-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.wf-row > span { flex: 0 0 66px; text-align: right; }
.wf-row-top { align-items: flex-start; }
.wf-row-top > span { padding-top: 3px; }

.wf input[type="text"], .wf input[type="password"], .wf select, .wf textarea {
  font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif;
  font-size: 11px;
  color: #000;
  background: var(--field);
  border: 1px solid var(--shadow);
  box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--hi);
  padding: 2px 3px;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 0;
  user-select: text;
}
.wf textarea { resize: vertical; font-family: "Courier New", Courier, monospace; }
.wf select { padding: 1px 2px; }
.wf input:disabled, .wf textarea:disabled {
  background: var(--face); color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--shadow);
}
.wf input:focus, .wf select:focus, .wf textarea:focus { outline: 1px dotted #000; outline-offset: -3px; }

.wf-check { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.wf-check input { margin: 0; }
.wf-note { margin: 6px 0 0; color: #444; font-size: 10.5px; }

/* -------------------------------- buttons -------------------------------- */
.wf-actions { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.wf-spacer { flex: 1 1 auto; }
.wf-btn {
  font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif;
  font-size: 11px; color: #000; background: var(--face);
  border: 1px solid var(--dark);
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--shadow);
  padding: 3px 14px; min-width: 68px; border-radius: 0; cursor: pointer;
}
.wf-btn:active:not(:disabled) {
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--hi);
  padding: 4px 13px 2px 15px;   /* the classic 1px "press" nudge */
}
.wf-btn:disabled { color: var(--shadow); text-shadow: 1px 1px 0 var(--hi); cursor: default; }
.wf-btn-def { font-weight: 700; outline: 1px solid #000; outline-offset: 1px; }

/* ------------------------------ log / trace ------------------------------ */
.wf-log-group { margin-bottom: 6px; }
.wf-log {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px; line-height: 1.45;
  background: #ffffff; color: #000;
  border: 1px solid var(--shadow);
  box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--hi);
  height: 300px; overflow: auto; padding: 4px 6px; margin: 0;
  white-space: pre-wrap; word-break: break-word; user-select: text;
}
/* WFetch's colour key: sent data red, received data blue, notices black. */
.wf-log .s { color: #c00000; }        /* sent      */
.wf-log .r { color: #0000c0; }        /* received  */
.wf-log .n { color: #006000; }        /* notice    */
.wf-log .e { color: #c00000; font-weight: 700; }
.wf-log .d { color: #666; }           /* dim/meta  */

/* ------------------------------- status bar ------------------------------ */
.wf-status { display: flex; gap: 4px; }
.wf-status-cell {
  flex: 1 1 auto; padding: 2px 6px; background: var(--face);
  border: 1px solid var(--shadow);
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--hi);
  font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-status-right { flex: 0 0 190px; text-align: right; }

@media (max-width: 720px) {
  .wf-cols { flex-direction: column; }
  .wf { min-width: 0; }
}