/* Computers panel — styles for app/os/computers.js.
   Reuses the color/spacing tokens defined on :root in app/css/member.css (--bg, --panel,
   --ink, --dim, --rule, --accent, --pill, --radius) rather than redefining them. Phone-first
   at 390px; every tap target is at least 44px tall. */

/* Drive handoff — Needs your attention over the Live View thumbnail (Grok chrome, On Easy copy). */
.oe-computer-stage {
  margin: 0.35rem 0 0.85rem;
  display: grid;
  gap: 0.55rem;
}
.oe-computer-stage-inner { display: grid; gap: 0.55rem; }
.oe-attn {
  background: #3a2a12;
  border: 1px solid #6a4e22;
  border-radius: 1.15rem;
  padding: 0.9rem 1rem 0.85rem;
  color: #f6f1e6;
}
.oe-attn-kicker {
  margin: 0 0 0.35rem;
  color: #f0a04a;
  font-weight: 650;
  font-size: 1.02rem;
}
.oe-attn-body { margin: 0 0 0.75rem; line-height: 1.35; font-size: 0.95rem; }
.oe-attn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oe-attn-skip,
.oe-attn-go {
  min-height: 44px;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.oe-attn-skip { background: #2a241c; color: #f6f1e6; }
.oe-attn-go { background: #f4f4f7; color: #14120e; font-weight: 650; }
/* Over the stream, not instead of it. The page stays tappable underneath for password and 2FA.
   The card itself does not eat taps — only Skip / I'm done do — so a login field under it still focuses. */
#computer-preview .oe-attn--overlay {
  position: absolute;
  z-index: 5;
  left: 0.45rem;
  right: 0.45rem;
  top: 0.45rem;
  bottom: auto;
  max-height: calc(100% - 4.8rem);
  overflow: auto;
  margin: 0;
  pointer-events: none;
}
#computer-preview .oe-attn--overlay .oe-attn-actions { pointer-events: auto; }
.oe-live-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.45rem 0 0;
}
.oe-live-keys[hidden] { display: none; }
.oe-live-key-input {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
  padding: 0.4rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid var(--rule, #f4f4f714);
  background: #fff;
  color: #111;
}
.oe-live-key-input[hidden],
#btn-computer-key-backspace[hidden] { display: none; }
#btn-computer-keyboard,
#btn-computer-key-backspace { min-height: 44px; }
#computer-preview .oe-attn--overlay[hidden] { display: none; }
.oe-live-thumb {
  position: relative;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 10;
  height: 11.5rem;
  border: 1px solid var(--rule, #f4f4f714);
}
.oe-live-thumb iframe,
.oe-live-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  color: #111;
}
.oe-live-thumb iframe {
  background: #0c0c0e;
  object-fit: contain;
  object-position: center top;
}
.oe-live-empty { background: #fff; }
.oe-live-empty { display: grid; place-items: center; padding: 1rem; text-align: center; }
.oe-live-open {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  min-height: 44px;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.72);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}
.oe-live-caption {
  margin: 0;
  text-align: center;
  color: var(--dim, #9a9aa8);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Computer chip peek. Same mechanics on phone and desktop.
   Layout difference (named): phone is a bottom sheet; desktop (>=900px) is a
   right-third rail over the chat. Open adds .is-expanded and grows Live View
   inside that same dock. No second modal. No full-viewport dim. Chat outside
   the dock stays clickable (non-modal open attribute, never showModal). */
#computer-preview.oe-computer-rail[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 80;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(78dvh, 100%);
  margin: 0;
  transform: none;
  border-radius: 1.25rem 1.25rem 0 0;
  background: #0c0c0e;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.45);
  overflow-x: clip;
  overflow-y: auto;
  pointer-events: auto;
}
#computer-preview.oe-computer-rail::backdrop { background: transparent; }
#computer-preview.oe-computer-rail[open].is-expanded {
  height: min(92dvh, 100%);
  max-height: 92dvh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  inset: auto 0 0 0;
}
#computer-preview.oe-computer-rail[open] .oe-cpv {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
#computer-preview.oe-computer-rail[open].is-expanded .oe-cpv {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#computer-preview.oe-computer-rail[open].is-expanded .oe-cpv-screen[data-surface="browser"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#computer-preview.oe-computer-rail[open] > .btn { align-self: flex-start; }
#computer-preview #btn-computer-preview-close {
  width: auto;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
}
#computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: min(52vh, 28rem);
  aspect-ratio: auto;
}
/* Drag edge is desktop only (>=900px), matching the home column gutter.
   Phone keeps the full-width bottom sheet; this handle stays hidden there. */
#gutter-computer {
  display: none;
}
@media (min-width: 900px) {
  #computer-preview.oe-computer-rail[open],
  #computer-preview.oe-computer-rail[open].is-expanded {
    inset: 0 0 0 auto;
    width: var(--oe-computer, clamp(18rem, 33.333vw, 36vw));
    min-width: 18rem;
    max-width: min(72vw, 56rem);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
  }
  /* Same grab as #gutter-left: 8px column, col-resize, native title pill.
     Home paints --rule until hover. That hairline disappears on this black rail,
     so the accent (the purple line in the home tooltip shot) stays on. */
  #gutter-computer {
    display: block;
    position: absolute;
    z-index: 90;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: col-resize;
    touch-action: none;
    background: var(--accent, #8b7cff);
    pointer-events: auto;
  }
  #gutter-computer::after {
    content: "";
    position: absolute;
    inset: 0 -10px 0 0;
  }
  #gutter-computer:hover,
  body.oe-computer-drag #gutter-computer {
    background: var(--accent, #8b7cff);
  }
  /* Live View, the connection-refused page, and the Open overlay sit under this edge.
     While dragging, they must not take the pointer. */
  body.oe-computer-drag #computer-preview iframe,
  body.oe-computer-drag #computer-preview .oe-live-open,
  body.oe-computer-drag #computer-preview .oe-attn--overlay,
  body.oe-computer-drag #computer-preview .oe-attn--overlay .oe-attn-actions {
    pointer-events: none;
  }
  #computer-preview.oe-computer-rail[open] .oe-live-thumb {
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 12rem;
    max-height: min(38vh, 22rem);
    aspect-ratio: 16 / 10;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
    flex: 1 1 auto;
    height: auto;
    min-height: min(42vh, 24rem);
    max-height: none;
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
  }
}
/* Phone sheet: match the mobile session (390×780) so the stream fills the dock width. */
@media (max-width: 899px) {
  #computer-preview.oe-computer-rail[open] .oe-live-thumb,
  #computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 16rem;
    aspect-ratio: 390 / 780;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
    flex: 1 1 auto;
    min-height: min(62vh, 36rem);
  }
  /* Expanded Live View is taller than the sheet. Keep Browser / Files / Terminal
     on the visible bottom — the 390×780 stream still scrolls underneath. */
  #computer-preview.oe-computer-rail[open].is-expanded {
    overflow: hidden;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-cpv {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-vm-dock {
    position: sticky;
    bottom: 0;
    z-index: 6;
    pointer-events: auto;
  }
}
.oe-cpv {
  position: relative;
  display: grid;
  min-height: 13rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0.9rem;
  background: #111;
}
/* Stay inside the dock. The shared 16:10 thumb is for the in-thread stage;
   here it was wider than the rail and cropped Live View over the chat. */
#computer-preview .oe-live-thumb {
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 14rem;
  aspect-ratio: auto;
  box-sizing: border-box;
}
.oe-cpv-screen[hidden] { display: none; }
.oe-cpv-app {
  min-height: 14rem;
  background: #111;
  padding: 1rem 1rem 4.6rem;
}
.oe-cpv-app-name { margin: 0 0 0.35rem; font-weight: 650; }
.oe-cpv-prompt {
  margin: 0 0 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #9dffb0;
}
/* Dock sits on the computer surface: black bar, icon only. Chrome, hammer files, terminal. */
.oe-vm-dock {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.35rem;
  height: 4.1rem;
  margin: 0;
  padding: 0 0 0.35rem;
  border-radius: 0;
  background: #000;
}
.oe-vm-dock[hidden] { display: none; }
.oe-vm-dock button {
  position: relative;
  min-height: 44px;
  min-width: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f4f4f7;
  padding: 0;
  cursor: pointer;
}
.oe-vm-dock button[aria-pressed="true"] { background: transparent; }
.oe-vm-dock button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #4c8bf5;
}
.oe-vm-ico { width: 2.35rem; height: 2.35rem; display: block; }
.oe-vm-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.oe-access-list { margin: 0.4rem 0 0.7rem; padding-left: 1.1rem; }
.oe-access-list li { margin: 0.25rem 0; }

.oe-cp-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem 0.25rem;
}
.oe-cp-header h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink, #f4f4f7);
}
.oe-cp-lead { margin: 0.35rem 0 0; color: var(--dim, #9a9aa8); font-size: 0.86rem; line-height: 1.4; }

#computer-drive {
  position: fixed; inset: 0; z-index: 90; background: var(--bg, #08080b); color: var(--ink, #f4f4f7); overflow: auto;
  padding: var(--oe-sat, 0) var(--oe-sar, 0) var(--oe-sab, 0) var(--oe-sal, 0);
}
.oe-drive-wrap { max-width: 44rem; margin: 0 auto; padding: 0.75rem 1rem 2rem; display: grid; gap: 0.85rem; }
.oe-drive-head { display: flex; align-items: flex-start; gap: 0.65rem; }
.oe-drive-titles { flex: 1; min-width: 0; }
.oe-drive-titles h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.oe-drive-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.oe-drive-actions .btn { min-height: 44px; }

.oe-cp-body { padding: 0.5rem 1rem 2rem; }

.oe-cp-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius, 1.25rem);
  background: var(--panel, #131319);
  border: 1px solid var(--rule, #f4f4f714);
}

.oe-cp-card-head { display: flex; align-items: center; gap: 0.75rem; }
.oe-cp-face { width: 44px; height: 44px; flex: none; display: inline-block; border-radius: 50%; overflow: hidden; background: var(--panel-2, #1a1a22); }
.oe-cp-face svg { width: 100%; height: 100%; display: block; }
.oe-cp-ring { fill: none; stroke: var(--accent, #8b7cff); stroke-width: 4; opacity: 0.55; }
.oe-cp-line { fill: none; stroke: var(--accent, #8b7cff); stroke-width: 4; stroke-linecap: round; }

.oe-cp-card-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.oe-cp-name { font-size: 1rem; font-weight: 600; color: var(--ink, #f4f4f7); display: flex; align-items: baseline; gap: 0.4rem; }
.oe-cp-version { font-size: 0.75rem; font-weight: 400; color: var(--dim, #9a9aa8); }

.oe-cp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--pill, 999px);
  font-size: 0.78rem;
  border: 1px solid var(--rule, #f4f4f714);
  color: var(--dim, #9a9aa8);
  background: var(--panel-2, #1a1a22);
  width: fit-content;
}
.oe-cp-pill--online { color: #6ee7a0; border-color: #6ee7a055; }
.oe-cp-pill--offline { color: var(--dim, #9a9aa8); }
.oe-cp-pill--off, .oe-cp-pill--optional, .oe-cp-pill--not-paired { color: var(--dim, #9a9aa8); }
.oe-cp-pill--done { color: #6ee7a0; }
.oe-cp-pill--failed { color: #ff8a8a; }
.oe-cp-pill--needs_input { color: #ffcf7a; }
.oe-cp-pill--queued, .oe-cp-pill--presented { color: var(--dim, #9a9aa8); }

.oe-cp-section { display: flex; flex-direction: column; gap: 0.5rem; }
.oe-cp-section h3 {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim, #9a9aa8);
}

.oe-cp-hint { margin: 0; color: var(--dim, #9a9aa8); font-size: 0.86rem; line-height: 1.4; }
.oe-cp-draft { margin-top: 0.35rem; }
.oe-cp-note {
  width: 100%;
  min-height: 8rem;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rule, #f4f4f714);
  background: var(--panel-2, #1a1a22);
  color: var(--ink, #f4f4f7);
  font: inherit;
  resize: vertical;
}

.oe-cp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oe-cp-chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.7rem;
  min-height: 44px;
  justify-content: center;
  border-radius: var(--radius, 1.25rem);
  background: var(--panel-2, #1a1a22);
  border: 1px solid var(--rule, #f4f4f714);
  color: var(--ink, #f4f4f7);
  font-size: 0.85rem;
}
.oe-cp-chip-sub { color: var(--dim, #9a9aa8); font-size: 0.72rem; }

.oe-cp-add-site {
  align-self: flex-start;
}

.oe-cp-jobs { display: flex; flex-direction: column; gap: 0.5rem; }
.oe-cp-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius, 1.25rem);
  background: var(--panel-2, #1a1a22);
  border: 1px solid var(--rule, #f4f4f714);
  color: var(--ink, #f4f4f7);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.oe-cp-job-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.oe-cp-job-label { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-cp-job-time { font-size: 0.72rem; color: var(--dim, #9a9aa8); }
.oe-cp-job--pending .oe-cp-job-time { color: var(--oe-meta, #dddde8); }

.oe-cp-pair { display: flex; flex-direction: column; gap: 0.6rem; }
.oe-cp-pair-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.oe-cp-pair-mint { align-self: stretch; min-height: 44px; }
.oe-cp-pair-input {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 0.9rem;
  border-radius: var(--radius, 1.25rem);
  border: 1px solid var(--rule, #f4f4f714);
  background: var(--panel-2, #1a1a22);
  color: var(--ink, #f4f4f7);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oe-cp-pair-input::placeholder { color: var(--dim, #9a9aa8); text-transform: none; letter-spacing: normal; }
.oe-cp-pair-btn { min-height: 44px; flex: 0 1 auto; }
@media (max-width: 420px) {
  .oe-cp-pair-row { flex-direction: column; align-items: stretch; }
  .oe-cp-pair-btn, .oe-cp-pair-input, .oe-cp-pair-mint { width: 100%; }
}
.oe-cp-link {
  background: none;
  border: none;
  color: var(--accent, #8b7cff);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.6rem 0;
  min-height: 44px;
  text-align: left;
}
.oe-cp-code {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--ink, #f4f4f7);
  text-align: center;
}

.oe-cp-thread-stack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.05rem;
  flex: none;
  min-width: 0;
}
.oe-cp-thread-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.75rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.55rem;
  gap: 0.28rem;
  border-radius: 999px;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: var(--ink, #f4f4f7);
  cursor: pointer;
  flex: none;
  position: relative;
  z-index: 4;
  pointer-events: auto;
}
.oe-cp-thread-chip:hover, .oe-cp-thread-chip:focus-visible {
  border-color: #8b7cff88;
  background: rgba(139, 124, 255, 0.12);
}
.oe-cp-thread-chip:active,
.oe-cp-thread-chip[aria-pressed="true"] {
  border-color: #8b7cff;
  background: rgba(139, 124, 255, 0.22);
  color: #fff;
}
.oe-cp-thread-icon { width: 1.2rem; height: 1.2rem; display: block; flex: none; }
.oe-cp-thread-word {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.oe-cp-thread-chip--offline, .oe-cp-thread-chip--off, .oe-cp-thread-chip--not-paired { color: var(--oe-meta, #dddde8); }
.oe-cp-thread-chip--online { color: #7dffa6; }
.oe-cp-thread-chip--failed { color: #ff8a8a; }
.oe-cp-stop { color: #ffb0c0; border-color: rgba(255, 176, 192, 0.35); }

.oe-cp-danger-link { color: #ff8a8a; }
.oe-cp-forget-confirm { display: flex; flex-direction: column; gap: 0.5rem; }
.oe-cp-danger { min-height: 44px; background: #3a1a1a; border-color: #ff8a8a55; color: #ff8a8a; }
.oe-cp-cancel { min-height: 44px; }

.oe-cp-card--hosted { border-color: #8b7cff55; }
.oe-cp-hosted-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.oe-cp-hosted-actions .btn { min-height: 44px; }
.oe-cp-settings { margin: 1.1rem 0 0; }
.oe-cp-settings > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  color: var(--ink, #f4f4f7); font-weight: 600;
}
.oe-cp-settings-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.35rem 0 0.2rem; }
.oe-cp-glow-spot {
  position: fixed;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 34%, rgba(255,255,255,0.03) 55%, transparent 74%);
  pointer-events: none;
  z-index: 8;
  display: none;
}
#computers.oe-cp-glow .oe-cp-glow-spot { display: block; }
@media (prefers-reduced-motion: reduce) {
  #computers.oe-cp-glow .oe-cp-glow-spot { display: none; }
}


/* wave1-390-clip */
#computers, #computers .oe-screen-body, #computers-panel, .oe-cp-body, .oe-cp-card {
  max-width: 100%;
  box-sizing: border-box;
}
#computers .oe-screen-body, #computers-panel, .oe-cp-body {
  overflow-x: hidden;
}
.oe-cp-pair-row, .oe-cp-card-head, .oe-cp-actions {
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 520px) {
  #computers, #settings.oe-sheet { overflow-x: hidden; }
  .oe-cp-name { overflow-wrap: anywhere; }
}

.oe-cp-thread-chip--starting, .oe-cp-chip--starting {
  color: #f0d878;
}

/* wave1-390-clip-v2 */
#computers, #computers * { box-sizing: border-box; }
#computers {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
#computers .oe-cp-body,
#computers .oe-drive-wrap,
#computers .oe-cp-card,
#computers .oe-cp-card-head,
#computers .oe-cp-pair-row,
#computers .oe-cp-actions {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#computers .oe-cp-card-head,
#computers .oe-cp-actions {
  flex-wrap: wrap;
}
@media (max-width: 420px) {
  #computers .oe-drive-wrap { padding-left: 0.75rem; padding-right: 0.75rem; }
  #computers .oe-cp-name { overflow-wrap: anywhere; word-break: break-word; }
  #computers .oe-cp-pill { max-width: 100%; }
}