/* VeroDash layout engine — rem/%, flex/grid, E-Ink (no motion) */

:root {
  --vd-pad: 0.55rem;
  --vd-gap: 0.45rem;
  --vd-chrome: 2.6rem;
  --vd-border: 0.12rem;
  --vd-radius: 0.7rem;
  --vd-grid: 2%;
  --vd-scale: 1;
  --edit-line: color-mix(in srgb, var(--ink) 42%, transparent);
}

html {
  font-size: clamp(0.85rem, 1.55vmin, 1.2rem);
}

.layout-chrome {
  display: flex;
  flex-direction: column;
  gap: var(--vd-gap);
  min-width: 0;
  flex: 0 0 auto;
}

.tab-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--vd-gap);
  min-height: var(--vd-chrome);
  overflow-x: auto;
  touch-action: pan-x;
  -webkit-overflow-scrolling: auto;
}

.hdr-right {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.layout-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vd-gap);
  min-width: 0;
}

.layout-add-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.layout-select,
.tab-btn,
.layout-btn,
#edit-mode-btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  min-width: 12%;
  min-height: 2.4rem;
  padding: 0.35rem 0.55rem;
  border: var(--vd-border) solid var(--line);
  border-radius: var(--vd-radius);
  background: var(--chip-bg);
  color: var(--ink);
  transition: none;
  animation: none;
}

.layout-select {
  flex: 1 1 auto;
  min-width: 18%;
}

.tab-btn {
  flex: 1 1 0;
}

body.vd-collapsed .tab-bar {
  display: none;
}

body.vd-collapsed .layout-toolbar {
  display: none !important;
}

.tab-btn.is-active,
.layout-btn.is-active,
#edit-mode-btn.is-on {
  background: var(--ink);
  color: var(--void);
  border-color: var(--ink);
}

.tab-btn.is-drop {
  outline: var(--vd-border) dashed var(--ink);
  outline-offset: 0.12rem;
}

#edit-mode-btn {
  min-width: 18%;
}

.layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vd-gap);
  min-height: var(--vd-chrome);
}

.layout-toolbar[hidden] {
  display: none !important;
}

.layout-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vd-gap);
  flex: 1 1 auto;
  min-width: 0;
}

.slot-btn.has-save {
  font-weight: 800;
}

.layout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vd-gap);
  min-width: 0;
}

.layout-status {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  min-height: 1.2rem;
  min-width: 20%;
}

/* Canvas: percentage-positioned widgets, not CSS grid tracks */
.stage.layout-canvas {
  display: block !important;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
  grid-template: none !important;
}

html.edit-mode .stage.layout-canvas {
  touch-action: none;
}

.layout-empty {
  position: absolute;
  inset: 20% 10%;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: var(--vd-border) dashed var(--line);
  min-height: 30%;
  pointer-events: none;
}

.layout-empty[hidden] {
  display: none !important;
}

.widget {
  position: absolute;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 8%;
  min-height: 8%;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  animation: none !important;
  transition: none !important;
}

.widget[hidden],
.widget.is-removed {
  display: none !important;
}

.widget.is-dragging {
  z-index: 80 !important;
}

/* Auto-scale layer: holds all widget content and is scaled (transform)
   proportionally to the card's current size, so inner elements grow/shrink
   with the card. The widget keeps its real layout size (left/top/w/h in %)
   and the layer fills it 100%/100%. */
.widget-scale {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.widget-toolbar {
  display: none !important;
}

.widget-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--head-bright);
}

.widget-handle,
.widget-btn {
  appearance: none;
  flex: 0 0 auto;
  min-width: 1.8rem;
  min-height: 1.8rem;
  border: var(--vd-border) solid var(--line);
  background: var(--chip-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  display: grid;
  place-content: center;
  padding: 0;
  border-radius: 0.2rem;
  transition: none;
}

.widget-handle-bars {
  display: block;
  width: 0.85rem;
  height: 0.7rem;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--ink) 0,
      var(--ink) 0.12rem,
      transparent 0.12rem,
      transparent 0.28rem
    );
}

.widget-del {
  font-weight: 800;
}

/* Resizers: invisible edges, reveal only on hover. No corner squares. */
.widget-resizers {
  display: none;
}

html.edit-mode .widget-resizers {
  display: block;
}

.widget-resizers [data-resize] {
  position: absolute;
  z-index: 4;
  min-width: 0;
  min-height: 0;
  touch-action: none;
  box-sizing: border-box;
  background: transparent;
  opacity: 0;
  transition: opacity 0.12s ease;
}

html.edit-mode .widget:hover .widget-resizers [data-resize] {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.widget-resizers [data-resize="n"] {
  top: 0;
  left: 0;
  right: 0;
  height: 0.7rem;
  cursor: ns-resize;
}

.widget-resizers [data-resize="s"] {
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.7rem;
  cursor: ns-resize;
}

.widget-resizers [data-resize="e"] {
  top: 0;
  bottom: 0;
  right: 0;
  width: 0.7rem;
  cursor: ew-resize;
}

.widget-resizers [data-resize="w"] {
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.7rem;
  cursor: ew-resize;
}

.widget-resizers [data-resize="ne"],
.widget-resizers [data-resize="nw"],
.widget-resizers [data-resize="se"],
.widget-resizers [data-resize="sw"] {
  width: 1.1rem;
  height: 1.1rem;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  border: var(--vd-border) solid var(--void);
  opacity: 0;
}

html.edit-mode .widget:hover .widget-resizers [data-resize="ne"],
html.edit-mode .widget:hover .widget-resizers [data-resize="nw"],
html.edit-mode .widget:hover .widget-resizers [data-resize="se"],
html.edit-mode .widget:hover .widget-resizers [data-resize="sw"] {
  opacity: 1;
}

.widget-resizers [data-resize="ne"] {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.widget-resizers [data-resize="nw"] {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.widget-resizers [data-resize="se"] {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}

.widget-resizers [data-resize="sw"] {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

/* Part (inner element) resizers: invisible until hover, like widgets. */
.part-resizers {
  display: none;
}

html.edit-mode .part-resizers {
  display: block;
}

html.edit-mode .part {
  cursor: move;
}

html.edit-mode .part:hover {
  outline: var(--vd-border) solid color-mix(in srgb, var(--ink) 24%, transparent);
  outline-offset: -1px;
}

.part-resizers [data-resize] {
  position: absolute;
  z-index: 4;
  min-width: 0;
  min-height: 0;
  touch-action: none;
  box-sizing: border-box;
  background: transparent;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: auto; /* box is pointer-events:none (pass-through); handles must be clickable */
}

html.edit-mode .part:hover .part-resizers [data-resize] {
  opacity: 1;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
}

.part-resizers [data-resize="n"] {
  top: 0; left: 0; right: 0; height: 0.55rem; cursor: ns-resize;
}
.part-resizers [data-resize="s"] {
  bottom: 0; left: 0; right: 0; height: 0.55rem; cursor: ns-resize;
}
.part-resizers [data-resize="e"] {
  top: 0; bottom: 0; right: 0; width: 0.55rem; cursor: ew-resize;
}
.part-resizers [data-resize="w"] {
  top: 0; bottom: 0; left: 0; width: 0.55rem; cursor: ew-resize;
}
.part-resizers [data-resize="ne"],
.part-resizers [data-resize="nw"],
.part-resizers [data-resize="se"],
.part-resizers [data-resize="sw"] {
  width: 0.85rem;
  height: 0.85rem;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  border: var(--vd-border) solid var(--void);
  opacity: 0;
}
html.edit-mode .part:hover .part-resizers [data-resize="ne"],
html.edit-mode .part:hover .part-resizers [data-resize="nw"],
html.edit-mode .part:hover .part-resizers [data-resize="se"],
html.edit-mode .part:hover .part-resizers [data-resize="sw"] {
  opacity: 1;
}
.part-resizers [data-resize="ne"] { top: 0; right: 0; cursor: nesw-resize; }
.part-resizers [data-resize="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.part-resizers [data-resize="se"] { bottom: 0; right: 0; cursor: nwse-resize; }
.part-resizers [data-resize="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }

/* Size slider panel (right-click -> Size) */
.vd-size-panel {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 14rem;
  max-width: 80vw;
  padding: 0.6rem 0.7rem;
  border: var(--vd-border) solid var(--line);
  border-radius: var(--vd-radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  font-family: inherit;
  color: var(--ink);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.vd-size-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.vd-size-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.vd-size-actions {
  display: flex;
  gap: 0.25rem;
}

.vd-size-ok,
.vd-size-x {
  appearance: none;
  font-family: inherit;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 1.6rem;
  min-height: 1.6rem;
  padding: 0 0.45rem;
  border: var(--vd-border) solid var(--line);
  border-radius: 0.3rem;
  background: var(--chip-bg);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

/* Grid fans (D2-D4): ~30% smaller, vertical layout with RPM centered below */
.fan-row.parts-host .fan-card-h {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15rem !important;
  padding: 0.35rem 0.45rem !important;
}

.fan-row.parts-host .fan-card-h .fan-side-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.12rem !important;
}

.fan-row.parts-host .fan-card-h .fan-side-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.fan-row.parts-host .fan-card-h .fan-name {
  font-size: 0.78rem !important; /* ~67% of 1.17rem */
  letter-spacing: 0.08em !important;
}

.fan-row.parts-host .fan-card-h .fan-svg {
  width: min(92px, 16vh) !important; /* ~67% of 138px */
  height: min(92px, 16vh) !important;
}

.fan-row.parts-host .fan-card-h .fan-rpm {
  font-size: 0.95rem !important; /* ~60% of 1.575rem */
  line-height: 1.1 !important;
}

.fan-row.parts-host .fan-card-h .fan-rpm-unit {
  font-size: 0.52rem !important;
  letter-spacing: 0.1em !important;
}

.vd-size-ok:hover {
  border-color: var(--ink);
}

.vd-size-x {
  color: var(--hot);
  border-color: color-mix(in srgb, var(--hot) 50%, var(--line));
}

.vd-size-x:hover {
  border-color: var(--hot);
}

.vd-size-val {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
}

.vd-size-range {
  width: 100%;
  accent-color: var(--cpu);
  cursor: ew-resize;
}

.vd-size-hint {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

html.edit-mode .widget {
  user-select: none;
  -webkit-user-select: none;
  cursor: move;
}

html.edit-mode .widget:hover {
  outline: var(--vd-border) solid color-mix(in srgb, var(--ink) 28%, transparent);
  outline-offset: -1px;
}

html.edit-mode .widget,
html.edit-mode .widget * {
  animation: none !important;
  transition: none !important;
}

.widget .mod-body,
.widget .mem-duo,
.widget .fan-row,
.widget .disk-row,
.widget .sys-stack,
.widget .iface-list,
.widget .sensor-grid,
.widget .lm-stack {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: auto;
}

.sys-stack,
.sensor-grid,
.iface-list {
  display: grid;
  gap: var(--vd-gap);
  align-content: start;
  overflow: auto;
  padding: 0.2rem 0;
}

.sys-stack {
  grid-template-columns: 1fr 1fr;
}

.iface-row,
.sensor-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 1.6rem;
  padding: 0.25rem 0.4rem;
  border: var(--vd-border) solid var(--line);
  background: var(--chip-bg);
  min-width: 0;
}

.iface-row .name,
.sensor-row .name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iface-row .meta,
.sensor-row .val {
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.iface-row.is-down {
  opacity: 0.55;
}

.net-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vd-gap);
  width: 100%;
  min-height: 0;
}

html.edit-mode .hdr .fs-btn,
html.edit-mode .hdr .theme-btn {
  transition: none;
}

/* E-ink / BW: high-contrast chrome, no glow */
html[data-theme="eink"] .tab-btn.is-active,
html[data-theme="eink"] .layout-btn.is-active,
html[data-theme="eink"] #edit-mode-btn.is-on,
html[data-theme="eink-bw"] .tab-btn.is-active,
html[data-theme="eink-bw"] .layout-btn.is-active,
html[data-theme="eink-bw"] #edit-mode-btn.is-on {
  background: #000;
  color: #fff;
  border-color: #000;
}

html[data-theme="eink"] .tab-btn,
html[data-theme="eink"] .layout-btn,
html[data-theme="eink"] .layout-select,
html[data-theme="eink"] #edit-mode-btn,
html[data-theme="eink"] .widget-handle,
html[data-theme="eink"] .widget-btn,
html[data-theme="eink-bw"] .tab-btn,
html[data-theme="eink-bw"] .layout-btn,
html[data-theme="eink-bw"] .layout-select,
html[data-theme="eink-bw"] #edit-mode-btn,
html[data-theme="eink-bw"] .widget-handle,
html[data-theme="eink-bw"] .widget-btn {
  border-width: 0.14rem;
  border-color: #111;
  background: #fff;
  color: #111;
  box-shadow: none;
}

html[data-theme="eink-bw"] .tab-btn,
html[data-theme="eink-bw"] .layout-btn,
html[data-theme="eink-bw"] .layout-select,
html[data-theme="eink-bw"] #edit-mode-btn,
html[data-theme="eink-bw"] .widget-handle,
html[data-theme="eink-bw"] .widget-btn {
  border-color: #000;
  color: #000;
}

html[data-theme="eink"] .layout-empty,
html[data-theme="eink-bw"] .layout-empty {
  border-color: #000;
  color: #111;
}

html[data-theme="eink"] {
  --edit-line: #111111;
}

html[data-theme="eink-bw"] {
  --edit-line: #000000;
}

html[data-theme="darkdeck"] .tab-btn,
html[data-theme="darkdeck"] .layout-btn,
html[data-theme="darkdeck"] .layout-select,
html[data-theme="darkdeck"] #edit-mode-btn,
html[data-theme="darkdeck"] .widget-handle,
html[data-theme="darkdeck"] .widget-btn {
  border-radius: 0.12rem;
  background: #10161f;
  color: #ccc;
}

html[data-theme="darkdeck"] .tab-btn.is-active,
html[data-theme="darkdeck"] .layout-btn.is-active,
html[data-theme="darkdeck"] #edit-mode-btn.is-on {
  background: #f7bd71;
  color: #0a0e14;
  border-color: #f7bd71;
}

@media (orientation: portrait) {
  .tab-btn,
  .layout-btn,
  #edit-mode-btn {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    min-height: 2.2rem;
    min-width: 16%;
  }

  .sys-stack,
  .net-split {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .widget,
  .tab-btn,
  .layout-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* Inner parts (fans, names, RPM, bars) */
.part {
  position: relative;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.part.is-free {
  position: absolute;
}

.part.is-dragging {
  z-index: 50;
}

.parts-host {
  position: relative !important;
}

/* Free movement: in edit mode a part can leave its card, so do not clip it.
   Harmless when parts are in-bounds (looks identical to overflow:hidden). */
html.edit-mode .widget,
html.edit-mode .mod-body,
html.edit-mode .side,
html.edit-mode .side-rest,
html.edit-mode .inline-fan,
html.edit-mode .mem-duo,
html.edit-mode .mem-pane,
html.edit-mode .gauge,
html.edit-mode .lm-stack,
html.edit-mode .fan-row,
html.edit-mode .disk-row,
html.edit-mode .sys-stack,
html.edit-mode .sensor-grid,
html.edit-mode .net-split,
html.edit-mode .iface-list {
  overflow: visible;
}

.fan-row.parts-host,
.disk-row.parts-host,
.mem-duo.parts-host,
.mod-body.parts-host,
.lm-stack.parts-host,
.sys-stack.parts-host,
.sensor-grid.parts-host,
.net-split.parts-host,
.iface-list.parts-host {
  display: block !important;
}

html.edit-mode .part[data-part] {
  outline: 0.07rem dashed var(--edit-line);
  outline-offset: -0.04rem;
}

.part-resizers {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* Right-click context menu for widgets (edit mode) — only appears on demand */
.vd-ctx-menu {
  position: fixed;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 8.5rem;
  padding: 0.3rem;
  border: var(--vd-border) solid var(--line);
  border-radius: var(--vd-radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  font-family: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.vd-ctx-menu button {
  appearance: none;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  padding: 0.45rem 0.6rem;
  border: var(--vd-border) solid transparent;
  border-radius: 0.3rem;
  background: var(--chip-bg);
  color: var(--ink);
}

.vd-ctx-menu button:hover {
  border-color: var(--line);
}

.vd-ctx-menu button.danger {
  color: var(--hot);
}

.fan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

/* LM Studio context HUD */
.lm-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0.15rem 0.45rem;
  box-sizing: border-box;
}

.widget[data-kind="lm-context"]:not(.is-rows-2) .lm-stack {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.widget[data-kind="lm-context"]:not(.is-rows-2) .lm-head {
  flex: 1 1 36%;
}

.widget[data-kind="lm-context"]:not(.is-rows-2) .lm-bar-row {
  flex: 1 1 58%;
}

.widget[data-kind="lm-context"]:not(.is-rows-2) .lm-jobs {
  flex: 1 1 100%;
}

.lm-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.lm-caret {
  flex: 0 0 auto;
  font-size: 0.62rem;
  color: var(--muted);
}

.lm-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lm-counts {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.68rem;
  white-space: nowrap;
  color: var(--muted);
}

.lm-bar-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.lm-bar {
  flex: 1 1 auto;
  min-width: 18%;
  min-height: 0.5rem;
  height: 0.55rem;
  overflow: hidden;
  background: var(--chip-bg);
  border: var(--vd-border) solid var(--line);
}

.lm-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}

.lm-bar-meta {
  flex: 0 0 auto;
  font-size: 0.62rem;
  white-space: nowrap;
  color: var(--muted);
}

.lm-jobs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.lm-jobs[hidden] {
  display: none !important;
}

.lm-job {
  flex: 1 1 42%;
  min-width: 38%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.12rem 0.4rem;
  border: var(--vd-border) solid var(--line);
  background: var(--chip-bg);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lm-job-pp {
  color: var(--ink);
}

.lm-job-gen {
  color: var(--ink);
}

html[data-theme="eink"] .lm-bar,
html[data-theme="eink-bw"] .lm-bar {
  background: #d0d0d0;
  border-color: #000;
}

html[data-theme="eink"] .lm-bar i,
html[data-theme="eink-bw"] .lm-bar i {
  background: #000;
}

html[data-theme="eink"] .lm-job,
html[data-theme="eink-bw"] .lm-job {
  border-color: #000;
  background: #fff;
  color: #000;
}