/* vogel.css — THE COUNTER AT THE CLERK'S WINDOW. (Sum 2026-08-14: "top bar is counter at clerks
   window in office with the pen on a chain, and vogel is the input.") The long wood counter, the
   brass deal trays, the VOGEL name plate, the pen on its beaded chain, the signature tablet on its
   own chain. Warm quiet afternoon light through frosted glass.

   The whole character in one frame: nineteen years of perfect filing, and the one box left blank.
   The pen is chained because things here are accounted for. Vogel finds that correct, and restful.

   Structure transplanted from skin/muskett.css (the PNG-photograph-header skin), palette from the
   counter plate itself: counter wood, brass, form-paper cream. The face is typewriter serif —
   vogel's world is a typed form, not a printed book.

   No -vert twin: same reason as the estate. A photograph has an up.
   Opacity on text banned; solid hex throughout. Apply via [data-skin="vogel"]. */

.convo[data-skin="vogel"] {
  background: #17130e;
  border: 2px solid #8a6d3b; border-radius: 6px;
}
.convo[data-skin="vogel"] .convo-screen {
  background: transparent; color: #e9e2d0;
  font-family: 'American Typewriter', 'Courier New', Courier, monospace;   /* the office standard. it is on the form */
}
.convo[data-skin="vogel"] .msg.bot { border-inline-start: 4px solid #b08d3f; color: #f0ead9; }
.convo[data-skin="vogel"] .msg.u   { border-inline-start: 4px solid #6f5a33; color: #e5decb; }

.agent-bar[data-skin="vogel"] .ab-head {
  background-image: url('vogel-topbar.png');
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 2px solid #8a6d3b;
  box-shadow: inset 0 -30px 24px -20px rgba(0,0,0,.55);
}
.agent-bar[data-skin="vogel"] { background: #17130e; border-color: #8a6d3b; }
.agent-bar[data-skin="vogel"] .ab-name {
  color: #e6cf9a; font-family: 'American Typewriter', 'Courier New', Courier, monospace;
  letter-spacing: .8px; text-shadow: 0 1px 4px #000;
}
.agent-bar[data-skin="vogel"] .ab-grip,
.agent-bar[data-skin="vogel"] .ab-add { color: #e6cf9a; text-shadow: 0 1px 4px #000; }
.convo[data-skin="vogel"] .convo-head {
  background: url('vogel-topbar.png') center / cover no-repeat;
  border-bottom: 2px solid #8a6d3b; box-shadow: inset 0 -30px 24px -20px rgba(0,0,0,.55);
}
.convo[data-skin="vogel"] .head-title { color: #e6cf9a; font-family: 'American Typewriter', Courier, monospace; text-shadow: 0 1px 4px #000; }

/* ── CLEAN TIER (clinical + corporate): NO PNG — same law as muskett.css ("no png top bars",
      drawn for clin/corp, and drawn must not mean BLACK). Vogel keeps the counter's colours
      without the photograph: FORM-PAPER CREAM between two bands of FILE-CABINET GREY — a blank
      form in a drawer, which is the joke. One gradient, no image. Solid hex; no text opacity. ── */
html[data-tier="clean"] .agent-bar[data-skin="vogel"] .ab-head,
html[data-tier="clean"] .convo[data-skin="vogel"] .convo-head {
  background: linear-gradient(100deg, #3d3a34 0%, #d8cfb4 46%, #3d3a34 100%);
  box-shadow: none;
}
html[data-tier="clean"] .agent-bar[data-skin="vogel"] { background: #3d3a34; border-color: #8a6d3b; }
html[data-tier="clean"] .agent-bar[data-skin="vogel"] .ab-name,
html[data-tier="clean"] .convo[data-skin="vogel"] .head-title { color: #efe6cf; text-shadow: none; }
html[data-tier="clean"] .convo[data-skin="vogel"] { background: #3d3a34; border-color: #8a6d3b; }