/**
 * CubeWP client portal — the redesign layer.
 *
 * The client dashboard's redesign (CTO-approved 2026-10-26), carried into the
 * portal. Three sheets do it, in order:
 *
 *   dashboard/assets/css/redesign.css   the design itself — tokens, typeface,
 *                                       the shared shell, and every component
 *                                       the views now draw inside .cwv2
 *   dashboard/assets/css/portal-v2.css  the frame shared with /agency: the
 *                                       drawer, the phone-width bar
 *   this file                           what is the portal's own
 *
 * The screens with a direct counterpart on /dashboard (page heads, the
 * figures strip, website cards, empty states) are drawn by app.js with the
 * design's own markup, so most of what they need is already in redesign.css.
 * What remains here: the agency's brand in the bar, the few small pieces the
 * portal adds inside .cwv2 (.cl-dl, .cl-url, the website chips), and the two
 * flows that keep their markup — the support conversation and the
 * custom-domain card — restyled in place, as the dashboard does its own.
 *
 * Everything is under .cwv2-shell, which portal-v2.js puts on <body> only
 * while the portal is on screen: the sign-in card shares this document.
 */

/* ── The frame ────────────────────────────────────────────────────────────── */

/* The design's 1180px column; an id outranks dashboard.css's 960px cap. */
.cwv2-shell #cl-view{ max-width:1180px;margin:0 auto; }

/* The view's subtitle in the bar was the old topbar's caption. The design's
   bar carries none — each screen's own head says it, under its title. */
.cwv2-shell #cl-sub{ display:none; }

/* THE AGENCY'S BRAND, in the bar's left cell. A name and a small label
   stacked, or the agency's logo in their place — whoever the client hired,
   never us. redesign.css makes the cell 252px with the sidebar's border; this
   stacks its contents. */
.cwv2-shell .cl-app .cw-header .cl-brand{
  flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;
  margin:0;min-width:0;overflow:hidden;
}
.cwv2-shell .cl-app .cl-brand-name{
  font:700 15px/1.25 var(--cw-font);color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cwv2-shell .cl-app .cl-brand-eyebrow{
  font:600 10.5px/1.3 var(--cw-font);color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em;
}
.cwv2-shell .cl-app .cl-brand-logo{ max-height:30px;max-width:180px;margin:0 0 2px; }
@media (max-width:768px){
  .cwv2-shell .cl-app .cw-header .cl-brand{ padding:0 4px;max-width:150px; }
  .cwv2-shell .cl-app .cl-brand-eyebrow{ display:none; }
}

/* The footer's note: who to contact, in the sidebar's quiet type. */
.cwv2-shell .cl-app .cl-help{
  margin:0;padding:0 4px;font-size:12.5px;line-height:1.5;color:var(--ink-3);
}

/* ── Inside the design's blocks ───────────────────────────────────────────── */

/* Two figures fill the strip; the design's own rule assumes four or three. */
.cwv2 .metrics.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cwv2 .metric .mf.ok{ color:var(--ok); }
.cwv2 .metric .mf.warn{ color:var(--warn); }
@media (max-width:479px){ .cwv2 .metrics.two{ grid-template-columns:minmax(0,1fr); } }

/* The card's identity is a BUTTON here, not a link: it opens the website's
   own screen through the portal's router. A button centres its text. */
.cwv2 .scard .sc-id{ text-align:left;padding:0;border:0;background:none;cursor:pointer; }
.cwv2 .scard .sc-act .btn svg{ color:var(--ink-3); }

/* The page head's search, the design's own box. */
.cwv2 .ph .acts .search input{ width:220px; }
@media (max-width:559px){ .cwv2 .ph .acts .search{ flex:1 1 auto; } .cwv2 .ph .acts .search input{ width:100%; } }

/* The way back above a page, on its own: a head with no title under it. */
.cwv2 .cl-ph-up{ margin-bottom:12px; }

/* The website chips on Domain. */
.cwv2 .cl-chips{ margin:0 0 16px; }
.cwv2 .cl-chips .chip .dotc{ width:7px;height:7px; }
.cwv2 .cl-chips .chip.on .dotc{ box-shadow:0 0 0 1.5px var(--surface); }

/* An address shown as the largest thing in its card. */
.cwv2 .cl-url{
  display:inline-block;font-size:18px;font-weight:650;letter-spacing:-.01em;
  color:var(--ink);overflow-wrap:anywhere;
}
.cwv2 .cl-url:hover{ color:var(--accent); }
.cwv2 .cl-note{ font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:4px 0 0; }
.cwv2 .cl-url + .cl-note{ margin-bottom:14px; }

/* A quiet key/value list: the label column, the value, a hairline between. */
.cwv2 .cl-dl{ display:flex;flex-direction:column; }
.cwv2 .cl-dl > div{
  display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr);gap:12px;
  align-items:center;padding:10px 0;border-top:1px solid var(--border);
}
.cwv2 .cl-dl > div:first-child{ border-top:0;padding-top:0; }
.cwv2 .cl-dl > div:last-child{ padding-bottom:0; }
.cwv2 .cl-dl dt{ font-size:13.5px;color:var(--ink-3); }
.cwv2 .cl-dl dd{ font-size:14px;color:var(--ink);min-width:0;overflow-wrap:anywhere;
                 display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.cwv2 .cl-dl-note{ font-size:12.5px;color:var(--ink-3); }
@media (max-width:479px){ .cwv2 .cl-dl > div{ grid-template-columns:minmax(0,1fr);gap:2px; } }

/* A card whose body is one sentence beside one button. */
.cwv2 .cl-row-b{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.cwv2 .cl-row-b .cl-note{ margin:0; }

.cwv2 .cl-empty-acts{ justify-content:center; }
.cwv2 .cl-foot{ font-size:12.5px;color:var(--ink-3);margin-top:16px; }

/* ── The flows that keep their markup ─────────────────────────────────────── */

/* A section heading the design draws between cards. */
.cwv2-shell .cl-app .cl-card-title{ font-size:15px;font-weight:650;color:var(--ink);margin:0 0 8px; }
.cwv2-shell .cl-app .cl-muted{ font-size:13.5px;line-height:1.55;color:var(--ink-3); }
.cwv2-shell .cl-app .cl-block{ margin-bottom:20px; }
.cwv2-shell .cl-app .cl-kv th{ font-size:13.5px;font-weight:500;color:var(--ink-3); }
.cwv2-shell .cl-app .cl-dot{ width:6px;height:6px;margin-right:0; }
.cwv2-shell .cl-app .cl-label{ font-size:13px;font-weight:600;color:var(--ink-2); }

/* The message list: one card, the rows flush to its edges. */
.cwv2-shell .cl-app .cw-card:has(> .cl-threads){ padding:0;overflow:hidden; }
.cwv2-shell .cl-thread + .cl-thread{ border-top-color:var(--border); }
.cwv2-shell .cl-thread-btn{ padding:14px 20px; }
.cwv2-shell .cl-thread-btn:hover{ background-color:var(--surface-2); }
.cwv2-shell .cl-thread-av,.cwv2-shell .cl-conv-av{
  width:36px;height:36px;border-radius:50%;
  background-color:var(--surface-2);color:var(--ink-3);font:700 12px/1 var(--cw-font);
}
.cwv2-shell .cl-thread.is-unread .cl-thread-av,.cwv2-shell .cl-conv-av{ background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .cl-thread-subject{ font-size:14px;font-weight:600;color:var(--ink); }
.cwv2-shell .cl-thread.is-unread .cl-thread-subject{ font-weight:700; }
.cwv2-shell .cl-thread-preview{ font-size:13.5px;color:var(--ink-3); }
.cwv2-shell .cl-thread-when{ font-size:12.5px;color:var(--ink-4); }
.cwv2-shell .cl-thread-tag{
  border-radius:5px;font-size:11px;letter-spacing:0;text-transform:none;
  background-color:var(--surface-2);color:var(--ink-3);
}
.cwv2-shell .cl-thread-dot{ background-color:var(--accent-fill); }
.cwv2-shell .cl-thread-dot.is-empty{ background-color:transparent; }

/* The conversation, as the design's ticket thread (the agency side draws
   the same markup): the agency's bubbles under its own mark, line breaks
   kept as typed, the reply across the card's foot. */
.cwv2-shell .cl-v2 .msg .av{ width:30px;height:30px;flex:0 0 auto; }
.cwv2-shell .cl-v2 .msg .cl-sup-them{ background-color:var(--ok-fill); }
.cwv2-shell .cl-v2 .cl-sup-body{ white-space:pre-wrap; }
.cwv2-shell .cl-v2 .cl-sup-msgs > .msg:last-child{ margin-bottom:0; }
.cwv2-shell .cl-v2 .ph h1 .badge{ vertical-align:middle;margin-left:4px;font-size:12px; }
.cwv2-shell .cl-v2 .cl-sup-reply{ flex-direction:column;align-items:stretch;gap:10px;padding:14px 20px 16px; }
.cwv2-shell .cl-v2 .cl-sup-reply .ta{ min-height:92px; }
.cwv2-shell .cl-v2 .cl-sup-foot{ justify-content:flex-end; }
.cwv2-shell .cl-v2 .cl-sup-foot .cl-composer-hint{ margin-right:auto;font-size:13px;color:var(--ink-3); }
.cwv2-shell .cl-v2 .cl-sup-foot .cl-composer-hint.is-error{ color:var(--bad); }
.cwv2-shell .cl-v2 .cl-sup-keys{ font-size:12.5px;color:var(--ink-4); }
.cwv2-shell .cl-v2 .cl-sup-foot .is-error ~ .cl-sup-keys{ display:none; }
.cwv2-shell .cl-v2 .cl-sup-note{
  font-size:13px;color:var(--ink-2);background-color:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;padding:8px 12px;
}
.cwv2-shell .cl-v2 .cl-sup-who{ font-size:13.5px;line-height:1.55;color:var(--ink-2); }
@media (max-width:767px){ .cwv2-shell .cl-v2 .cl-sup-keys{ display:none; } }
/* The composer's fields are the platform's sign-up inputs; in the portal they
   take the design's field. */
.cwv2-shell .cl-app .tpl-input{
  width:100%;background-color:var(--surface);color:var(--ink);
  border:1px solid var(--border-2);border-radius:9px;font-size:14px;font-family:inherit;
}
.cwv2-shell .cl-app input.tpl-input{ height:38px;padding:0 12px; }
.cwv2-shell .cl-app .tpl-input:focus{
  outline:none;border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg);
}
.cwv2-shell .cl-app .cl-textarea{ padding:10px 12px;min-height:96px; }
.cwv2-shell .cl-app .cl-composer .tpl-form-group,
.cwv2-shell .cl-app .cl-block .tpl-form-group{ margin:0 0 12px; }
.cwv2-shell .cl-composer-foot{ margin-top:4px; }

/* The fallback toast, as the inverse of the page. */
.cwv2-shell .cl-toast{
  background-color:var(--ink);color:var(--surface);border-radius:9px;
  font-size:13.5px;font-weight:600;padding:10px 16px;box-shadow:var(--e2);
}