/* ClipLab app pages. One design language with the Create flow and Projects
   (cliplab-create.css): quiet translucent cards on a hairline border, violet
   for "on", uppercase kickers over 700 weight titles, 11px control radius.

   Two layers, both opt in:
   1. Shell polish (workspace switcher, popovers, top bar buttons). Applies on
      any ClipLab page that loads this file. Never on Studio or Ads desks, which
      do not load it, and the :not() guards keep it off them even if one did.
   2. Page polish. Only under body.cla, which the account, settings, clipping,
      analytics and help pages opt into. app.html and projects.html load this
      file for layer 1 only.
   Nothing here changes an id, a handler or what a control does. */

.cl-shelled:not(.studio-desk):not(.ads-desk),
.cla {
  --cla-card: rgba(255, 255, 255, 0.024);
  --cla-card-2: rgba(255, 255, 255, 0.04);
  --cla-line: rgba(255, 255, 255, 0.075);
  --cla-line-2: rgba(255, 255, 255, 0.13);
  --cla-on: rgba(139, 92, 246, 0.12);
  --cla-on-line: rgba(167, 139, 250, 0.6);
  --cla-violet: #c4b5fd;
  --cla-grad: linear-gradient(135deg, #8b5cf6, #6366f1);
  --cla-bar: linear-gradient(90deg, #8b5cf6, #22d3ee);
}

/* =============================================================== 1. shell */

/* Workspace switcher. shell.js draws it with inline styles and an emoji; the
   font-size trick drops the emoji and caret text, the pseudo elements draw the
   same folder and chevron icons the rest of the app uses. */
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs {
  gap: 0.45rem !important;
  height: 2.1rem;
  max-width: 15rem;
  padding: 0 0.6rem 0 0.55rem !important;
  border-radius: 10px !important;
  border: 1px solid var(--cla-line-2) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  font-size: 0 !important;
  line-height: 1;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs::before,
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs::after {
  content: "";
  flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs::before {
  width: 15px;
  height: 15px;
  color: var(--cla-violet);
  --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 7.5a2 2 0 012-2h4l2 2h7a2 2 0 012 2v8a2 2 0 01-2 2h-13a2 2 0 01-2-2z'/></svg>");
}
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs::after {
  width: 12px;
  height: 12px;
  color: var(--text-dim);
  --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
}
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWs > span:not(#clWsName) { display: none; }
.cl-shelled:not(.studio-desk):not(.ads-desk) #clWsName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

/* Popovers: the same card as the Create panel, a little more opaque so text
   over the page stays readable. */
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-pop {
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: #0f0f17;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px rgba(0, 0, 0, 0.55);
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-pop-head {
  padding: 0.55rem 0.65rem 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-pop-item { border-radius: 10px; }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-pop-item:hover { background: rgba(255, 255, 255, 0.06); }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-pop-sep { background: var(--cla-line); }

.cl-shelled:not(.studio-desk):not(.ads-desk) #clWsPop {
  background: #0f0f17;
  border-color: rgba(255, 255, 255, 0.11);
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-row { border-radius: 10px; margin: 1px 0; }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-row.on {
  background: var(--cla-on);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.28) inset;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-pick { border-radius: 10px; padding: 0.55rem 0.6rem; }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-pick:hover { background: rgba(255, 255, 255, 0.05); }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-row.on .cl-ws-pick:hover { background: transparent; }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-ico {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  opacity: 1;
  color: var(--text-muted);
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-ico svg { width: 14px; height: 14px; }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-row.on .cl-ws-ico {
  background: rgba(139, 92, 246, 0.18);
  color: var(--cla-violet);
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-check { color: var(--cla-violet); }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-gear { opacity: 0.55; }
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-ws-new {
  margin-top: 0.1rem;
  color: var(--cla-violet);
  font-weight: 600;
}

/* Top bar buttons: the same 11px control as the page, not a 999px pill that is
   taller than the bar around it. */
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top .btn {
  height: 2.2rem;
  padding: 0 0.85rem;
  border-radius: 10px;
  font-size: 0.84rem;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top .btn-ghost {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--cla-line-2);
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top .btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.2);
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top .btn-primary {
  background: var(--cla-grad);
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.3);
  animation: none;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top .btn-primary:hover:not(:disabled) {
  animation: none;
  filter: brightness(1.1);
  transform: none;
}
.cl-shelled:not(.studio-desk):not(.ads-desk) .cl-credits {
  height: 2.2rem;
  border-radius: 10px;
}

/* On a phone the page heading already names the page, so the bar gives its
   room to the workspace switcher instead of overlapping the two. */
@media (max-width: 640px) {
  .cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top { gap: 0.4rem; padding: 0 0.75rem; }
  .cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top-left { flex: 1 1 auto; min-width: 0; gap: 0.4rem; }
  .cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top-right { flex: none; gap: 0.35rem; }
  .cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top-title:has(~ #clWs[style*="inline-flex"]) { display: none; }
  /* shell.css means to hide Back here, but its later .cl-iconbtn rule wins. */
  .cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top .cl-back-btn { display: none; }
  .cl-shelled:not(.studio-desk):not(.ads-desk) #clWs { flex: 0 1 auto; min-width: 0; max-width: 9.5rem; }
  /* The plan pill repeats the rail's plan badge; on a phone it only squeezes the switcher. */
  .cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top #userPill { display: none; }
  .cl-shelled:not(.studio-desk):not(.ads-desk) .cl-top .btn { padding: 0 0.7rem; }
  /* The link icon says Connect on its own; the label comes back above 640px. */
  .cl-shelled:not(.studio-desk):not(.ads-desk) #clConnectLabel { display: none; }
  .cl-shelled:not(.studio-desk):not(.ads-desk) #clConnect { width: 2.2rem; padding: 0; justify-content: center; }
}

/* ================================================================ 2. pages */

.cla .cl-page { font-family: var(--font); }
.cla .cl-wrap,
.cla .cl-wrap-narrow { margin-top: 0.4rem; position: relative; z-index: 1; }

/* ------------------------------------------------------------- headings */

.cla .cla-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cla .cl-head { align-items: flex-end; margin-bottom: 1.5rem; }
.cla .cl-h1 {
  margin: 0;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cla .cla-kicker + .cl-h1 { margin-top: 0.3rem; }
.cla .cl-head .cl-sub { margin-top: 0.35rem; font-size: 0.9rem; max-width: 64ch; }

.cla .cla-sec {
  margin: 1.6rem 0 0.6rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------------------------------------------------------------- cards */

.cla .cl-card {
  padding: 1.3rem 1.4rem;
  border-radius: 18px;
  border: 1px solid var(--cla-line);
  background: var(--cla-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}
.cla .cl-card + .cl-card { margin-top: 1rem; }
.cla .cl-card-t {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(167, 139, 250, 0.7);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.cla .cl-card p { font-size: 0.88rem; line-height: 1.62; }

.cla .cl-empty {
  padding: 2.2rem 1rem;
  border: 1px dashed var(--cla-line-2);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.cla .cl-empty h3 { color: var(--text); font-size: 1rem; font-weight: 650; }

.cla .cl-soon {
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid var(--cla-line-2);
  color: var(--text-muted);
}

/* -------------------------------------------------------------- buttons */

.cla .cl-page .btn {
  border-radius: 11px;
  padding: 0.6rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
}
.cla .cl-page .btn-primary {
  background: var(--cla-grad);
  border: 1px solid rgba(167, 139, 250, 0.5);
  color: #fff;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
  animation: none;
}
.cla .cl-page .btn-primary:hover:not(:disabled) {
  animation: none;
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(99, 102, 241, 0.4);
}
.cla .cl-page .btn-ghost {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--cla-line-2);
  color: var(--text);
}
.cla .cl-page .btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------- fields */

.cla .cl-page input[type="text"],
.cla .cl-page input[type="email"],
.cla .cl-page input[type="number"],
.cla .cl-page select,
.cla .cl-page textarea {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: var(--cla-line-2);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cla .cl-page input[type="text"]:focus,
.cla .cl-page input[type="email"]:focus,
.cla .cl-page input[type="number"]:focus,
.cla .cl-page select:focus,
.cla .cl-page textarea:focus {
  outline: 0;
  border-color: var(--cla-on-line);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
.cla .cl-page select option { background: #12121c; color: var(--text); }

/* A segmented control, the same one Projects uses for its filters. Pages add
   .cla-seg to their existing tab or toggle container. */
.cla .cla-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 11px;
  border: 1px solid var(--cla-line);
  background: rgba(255, 255, 255, 0.02);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.cla .cla-seg > button {
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}
.cla .cla-seg > button:hover { color: var(--text); }
.cla .cla-seg > button.on { background: rgba(255, 255, 255, 0.08); color: var(--text); border-bottom-color: transparent; }

@media (max-width: 640px) {
  .cla .cl-h1 { font-size: 1.4rem; }
  .cla .cl-card { padding: 1.05rem 1rem; border-radius: 16px; }
  .cla .cl-head { margin-bottom: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cla .cl-page * { transition: none !important; }
}