@charset "UTF-8";
/* Clicklist: the family-facing list, the editor preview and the printed card.
   The accent is the one colour a worker picks; product chrome stays platform blue. */
.cl-accent-blue {
  --cl-accent: var(--color-primary);
  --cl-accent-dark: var(--color-primary-dark);
  --cl-accent-tint: #f0f9ff; }

/* tint matches .bg-primary-light */
.cl-accent-amber {
  --cl-accent: #d97706;
  --cl-accent-dark: #b45309;
  --cl-accent-tint: #fffbeb; }

/* prototype hex; no amber token in styles.scss */
.cl-accent-teal {
  --cl-accent: #0d9488;
  --cl-accent-dark: #0f766e;
  --cl-accent-tint: #effcfa; }

/* prototype hex; no teal token in styles.scss */
.cl-accent-green {
  --cl-accent: #059669;
  --cl-accent-dark: #047857;
  --cl-accent-tint: #ecfdf5; }

/* prototype hex; --color-giving is a different green */
.cl-accent-rose {
  --cl-accent: #e11d48;
  --cl-accent-dark: #be123c;
  --cl-accent-tint: #fff1f2; }

/* prototype hex; no rose token in styles.scss */
.cl-accent-navy {
  --cl-accent: #1b2f80;
  --cl-accent-dark: #152563;
  --cl-accent-tint: #eef2ff; }

/* prototype hex; no navy token in styles.scss */
.cl-sheet {
  --cl-ink: #111827;
  --cl-secondary: #6b7280;
  --cl-muted: #9ca3af;
  --cl-border: #e8eaf0;
  --cl-border-light: #f1f2f6;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 18px 40px; }

.cl-head {
  padding: 28px 0 18px; }

.cl-who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 17px; }

/* A circle is a person; an organisation gets a rounded square. */
.cl-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cl-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px -7px var(--cl-accent); }

.cl-avatar.is-org {
  border-radius: 13px;
  font-size: 14px;
  letter-spacing: 0; }

.cl-avatar.is-photo {
  object-fit: cover;
  background: var(--cl-border-light);
  box-shadow: none;
  padding: 0; }

.cl-whotext {
  min-width: 0; }

.cl-worker {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--cl-ink);
  line-height: 1.25; }

.cl-role {
  display: block;
  font-size: 12.5px;
  color: var(--cl-secondary);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 1px; }

.cl-title {
  font-size: clamp(1.4rem, 4.6vw, 1.8rem);
  margin: 0;
  letter-spacing: -0.03em;
  color: var(--cl-ink);
  font-weight: 700;
  line-height: 1.14; }

.cl-note {
  font-size: 14.5px;
  margin: 11px 0 0;
  line-height: 1.6;
  background: var(--cl-accent-tint);
  border-radius: 14px;
  padding: 12px 15px; }

/* One row, one resource. Big enough to hit with a thumb on a bus. */
.cl-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--cl-border);
  border-radius: 16px;
  padding: 14px 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
  transition: 0.16s;
  color: inherit;
  min-height: 66px;
  text-decoration: none; }

a.cl-item:hover {
  border-color: var(--cl-accent);
  box-shadow: 0 12px 32px -12px rgba(27, 47, 128, 0.18);
  transform: translateY(-1px); }

a.cl-item:active {
  transform: scale(0.99); }

.cl-item .ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--cl-accent-tint);
  color: var(--cl-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px; }

.cl-item .body {
  flex: 1;
  min-width: 0;
  display: block; }

.cl-item .t {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cl-ink);
  line-height: 1.3; }

.cl-item .d {
  display: block;
  font-size: 13px;
  color: var(--cl-secondary);
  line-height: 1.45;
  margin-top: 2px; }

.cl-item .go {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cl-accent);
  display: flex;
  align-items: center;
  gap: 6px; }

.cl-item .go i {
  font-size: 12px; }

.cl-section {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--cl-secondary);
  margin: 26px 0 10px;
  padding-left: 3px; }

.cl-sheet > .cl-section:first-child {
  margin-top: 6px; }

.cl-head + .cl-section {
  margin-top: 10px; }

.cl-empty {
  border: 2px dashed var(--cl-border);
  border-radius: 16px;
  padding: 34px 20px;
  text-align: center;
  color: var(--cl-muted);
  font-size: 14.5px; }

/* Foot of a family's list: who sent it and how to reach them. */
.cl-foot {
  text-align: center;
  padding: 26px 0 8px;
  border-top: 1px solid var(--cl-border-light);
  margin-top: 26px; }

.cl-foot-line {
  font-size: 14px;
  color: var(--cl-secondary); }

.cl-foot-line b {
  color: var(--cl-ink); }

.cl-foot-actions {
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px; }

.cl-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1.5px solid var(--cl-border);
  background: #fff;
  border-radius: 50px;
  padding: 9px 18px;
  color: var(--cl-ink);
  transition: 0.15s;
  cursor: pointer;
  text-decoration: none; }

.cl-mini:hover {
  border-color: var(--cl-accent);
  color: var(--cl-accent); }

/* On a narrow phone the verb pushes a two line title into three, and the
   chevron already says the row goes somewhere. */
@media (max-width: 480px) {
  .cl-item .go .verb {
    display: none; } }

/* The printed half sheet. */
.cl-handout {
  max-width: 620px;
  margin: 34px auto;
  background: #fff;
  border: 1.5px solid var(--cl-border, #e8eaf0);
  border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(27, 47, 128, 0.28);
  padding: 36px 34px;
  text-align: center; }

@media print {
  .no-print {
    display: none !important; }
  body {
    background: #fff; }
  .cl-handout {
    box-shadow: none;
    border: 1px dashed #999;
    margin: 0 auto;
    page-break-inside: avoid; } }

/* ── The pitch + directory page ── */
.cl-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px; }

.cl-hero {
  background: radial-gradient(1000px 520px at 8% -22%, #e3f0fd 0%, transparent 60%), radial-gradient(900px 460px at 96% -12%, #f0f9ff 0%, transparent 56%);
  padding: 64px 0 70px; }
  .cl-hero h1 {
    font-size: clamp(2.05rem, 4.3vw, 3.05rem); }

.cl-lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  max-width: 540px;
  margin-top: 18px; }

.cl-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 26px; }
  .cl-trust-row span {
    font-size: 13.5px;
    color: #6b7280;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px; }
  .cl-trust-row i {
    color: #059669; }

/* The hero shows the top of a list, not a whole one; the screen is shorter than
   the editor's and the fold is what sells the idea. */
.cl-hero-phone {
  width: 310px;
  /* The list runs past the screen; fading the last rows into white reads as a
     fold rather than a row that failed to load. */ }
  .cl-hero-phone .cl-phone-screen {
    height: 520px;
    overflow: hidden; }
  .cl-hero-phone .cl-phone-screen::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%);
    pointer-events: none; }
  .cl-hero-phone .cl-item .go {
    display: none; }
  .cl-hero-phone .cl-foot {
    display: none; }

.cl-definition {
  background: #fff;
  border-top: 1px solid #f1f2f6;
  border-bottom: 1px solid #f1f2f6;
  padding: 26px 0; }
  .cl-definition .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    text-align: center; }
  .cl-definition .icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #f0f9ff;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0; }
  .cl-definition p {
    margin: 0;
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    font-weight: 600;
    max-width: 700px;
    line-height: 1.5; }

.cl-step {
  display: flex;
  gap: 16px;
  align-items: flex-start; }

.cl-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px; }

.cl-step h3 {
  font-size: 1.06rem;
  margin: 5px 0; }

.cl-step p {
  font-size: 14.5px;
  color: #6b7280;
  margin: 0;
  line-height: 1.6; }

.cl-card-x {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 20px;
  padding: 24px 22px;
  height: 100%; }
  .cl-card-x h3 {
    font-size: 1.06rem;
    margin: 14px 0 6px; }
  .cl-card-x p {
    font-size: 14.5px;
    color: #6b7280;
    margin: 0;
    line-height: 1.6; }

.cl-icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #f0f9ff;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; }

.cl-kind-card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #f1f2f6; }
  .cl-kind-card:last-child {
    border-bottom: 0; }
  .cl-kind-card .ki {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    background: #f0f9ff;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; }
  .cl-kind-card h4 {
    font-size: 0.98rem;
    margin: 0 0 2px; }
  .cl-kind-card p {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5; }

.cl-quote-band {
  background: #1b2f80;
  color: #dbe4f5;
  padding: 64px 0;
  /* prototype navy; no app token */ }
  .cl-quote-band h2 {
    color: #fff; }
  .cl-quote-band .item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14.5px; }
  .cl-quote-band .item i {
    color: #a5b4fc;
    margin-top: 4px; }

.cl-cta-band {
  background: radial-gradient(900px 400px at 50% -30%, #f0f9ff 0%, transparent 60%);
  padding: 80px 0; }

/* ── The featured directory ── */
.cl-dir-search {
  position: relative;
  max-width: 560px; }
  .cl-dir-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af; }
  .cl-dir-search input {
    border-radius: 999px;
    padding: 11px 18px 11px 42px; }

.cl-dir-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center; }

.cl-dir-tab {
  font-size: 13.5px;
  font-weight: 700;
  color: #6b7280;
  text-decoration: none;
  border: 1.5px solid #e8eaf0;
  border-radius: 999px;
  padding: 6px 15px;
  background: #fff; }
  .cl-dir-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary); }
  .cl-dir-tab.is-on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff; }

.cl-dir-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1.5px solid #e8eaf0;
  border-radius: 20px;
  padding: 20px;
  transition: 0.16s; }
  .cl-dir-card:hover {
    border-color: var(--cl-accent);
    box-shadow: 0 12px 32px -12px rgba(27, 47, 128, 0.18);
    transform: translateY(-2px);
    color: inherit; }

.cl-dir-from {
  display: flex;
  align-items: center;
  gap: 10px; }

.cl-dir-from .cl-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px; }

.cl-dir-title {
  font-size: 1.12rem;
  margin: 0; }

.cl-dir-blurb {
  font-size: 13.5px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5; }

.cl-dir-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  font-size: 12.5px;
  color: #9ca3af;
  font-weight: 600; }

.cl-dir-open {
  color: var(--cl-accent);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px; }

.cl-dir-note {
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  margin: 26px 0 0; }

/* ── The family page's brand line ── */
.cl-by {
  margin: 26px auto 0;
  padding-bottom: 40px;
  text-align: center;
  font-size: 12.5px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap; }
  .cl-by img {
    height: 16px;
    opacity: 0.65; }

/* ── Inside the handout card ── */
.cl-handout .cut {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
  font-weight: 700; }

.cl-handout .cl-handout-face {
  margin: 14px 0; }

.cl-handout .cl-handout-face .cl-avatar {
  width: 58px;
  height: 58px;
  font-size: 20px;
  margin: 0 auto; }

.cl-handout h1 {
  font-size: 1.75rem;
  margin: 16px 0 8px; }

.cl-handout .sub {
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 22px; }

.cl-handout .qr-box {
  margin-bottom: 20px; }

.cl-handout .who {
  font-size: 15px;
  font-weight: 700; }

.cl-handout .who span {
  display: block;
  font-weight: 500;
  font-size: 13.5px;
  color: #6b7280; }

.cl-handout .url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: #6b7280;
  margin-top: 16px;
  word-break: break-all; }

.cl-handout .brandline {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #f1f2f6; }

.cl-handout .brandline img {
  height: 16px;
  opacity: 0.6; }

.cl-handout-hint {
  font-size: 13px;
  color: #9ca3af; }

/* ── The editor ── */
/* #main opens every page with 20px of padding; these lead their page, so they
   pull back up against the nav. */
#main > .cl-hero,
#main > [data-controller="clicklist-editor"] {
  margin-top: -20px; }

/* The band the page opens on. The prototype floats it under a fixed nav; here it
   just leads the page, with the same eyebrow, title and lede. */
.cl-build-band {
  background: radial-gradient(1000px 520px at 8% -40%, #e3f0fd 0%, transparent 60%), radial-gradient(900px 460px at 96% -30%, #f0f9ff 0%, transparent 56%);
  border-bottom: 1px solid #f1f2f6;
  padding: 30px 0 26px; }
  .cl-build-band h1 {
    font-size: clamp(1.6rem, 3.2vw, 2.1rem);
    margin: 10px 0 0;
    letter-spacing: -0.03em; }
  .cl-build-band .cl-build-lede {
    font-size: 14.5px;
    color: #6b7280;
    margin: 9px 0 0;
    max-width: 560px;
    line-height: 1.6; }

.cl-build-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px; }

.cl-build-wrap {
  padding: 26px 0 70px; }

/* Both tracks are minmax(0, …). A bare 372px track cannot shrink, so a viewport
   narrower than the pair pushes the phone out of the page instead of wrapping. */
.cl-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
  gap: 34px;
  align-items: start; }

@media (max-width: 1100px) {
  .cl-build-grid {
    grid-template-columns: minmax(0, 1fr); } }

.cl-panel {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
  margin-bottom: 18px; }

/* The head is the toggle. A caseworker who has finished one section wants it out
   of the way, and the summary in the header means collapsing loses nothing. */
.cl-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid #f1f2f6;
  background: none;
  border-radius: 20px 20px 0 0;
  cursor: pointer;
  transition: 0.14s; }
  .cl-panel-head:hover {
    background: #fafbfc; }
  .cl-panel-head h2 {
    font-size: 1.02rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0; }
  .cl-panel-head h2 i {
    color: var(--color-primary);
    font-size: 15px; }
  .cl-panel-head .sub {
    font-size: 12.5px;
    color: #9ca3af;
    font-weight: 500;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .cl-panel-head.collapsed {
    border-bottom-color: transparent;
    border-radius: 20px; }
  .cl-panel-head.collapsed .cl-caret {
    transform: rotate(-90deg); }

.cl-caret {
  color: #9ca3af;
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.2s; }

.cl-panel-body {
  padding: 18px 20px; }

/* Whoever the list is from, and what they look like. */
.cl-who-face {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: #fafbfc;
  border: 1px solid #f1f2f6;
  border-radius: 16px;
  margin-bottom: 18px; }
  .cl-who-face .cl-avatar {
    width: 56px;
    height: 56px;
    font-size: 18px; }
  .cl-who-face .cl-avatar.is-org {
    border-radius: 16px;
    font-size: 20px; }

.cl-who-face-preview {
  flex-shrink: 0; }

.cl-who-face-actions {
  flex: 1;
  min-width: 0; }

/* Segmented control */
.cl-seg {
  display: inline-flex;
  background: #f1f2f6;
  border-radius: 12px;
  padding: 3px;
  margin-bottom: 18px;
  gap: 3px; }

.cl-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #6b7280;
  transition: 0.14s; }
  .cl-seg-btn:hover {
    color: #111827; }
  .cl-seg-btn i {
    font-size: 13px; }

.btn-check:checked + .cl-seg-btn {
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08); }

/* The editor's labels are smaller and heavier than Bootstrap's, so a panel of
   eight fields reads as one form rather than eight headings. */
.cl-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 5px; }
  .cl-label small {
    font-weight: 500;
    color: #9ca3af; }

/* What a new list arrives with, on /users/clicklists/new. */
.cl-default-list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .cl-default-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 0;
    border-top: 1px solid #f1f2f6; }
  .cl-default-list li:first-child {
    border-top: 0;
    padding-top: 0; }
  .cl-default-list i {
    color: var(--color-primary);
    font-size: 13px;
    width: 18px;
    text-align: center;
    margin-top: 3px; }
  .cl-default-list strong {
    display: block;
    font-size: 14px;
    color: var(--cl-ink); }
  .cl-default-list em {
    display: block;
    font-size: 12.5px;
    color: #9ca3af;
    font-style: normal;
    line-height: 1.45; }

/* Pickers */
.cl-swatch-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap; }

.cl-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--cl-accent);
  border: 2.5px solid transparent;
  outline: 1.5px solid #e8eaf0;
  outline-offset: -1px;
  transition: 0.14s; }

.btn-check:checked + .cl-swatch {
  border-color: #fff;
  outline: 2.5px solid #111827;
  outline-offset: 1px; }

.cl-icon-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap; }

.cl-icon-pick {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  border: 1.5px solid #e8eaf0;
  background: #fff;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: 0.14s; }
  .cl-icon-pick:hover {
    border-color: var(--color-primary);
    color: var(--color-primary); }

.btn-check:checked + .cl-icon-pick {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff; }

.cl-kind-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap; }

.cl-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid #e8eaf0;
  background: #fff;
  color: #374151;
  cursor: pointer;
  border-radius: 50px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  transition: 0.14s; }
  .cl-kind-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary); }

.btn-check:checked + .cl-kind-chip {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff; }

/* A text button for the actions that are not the point of the panel. */
.cl-text-link {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  background: none;
  border: none;
  padding: 0; }
  .cl-text-link:hover {
    color: var(--color-primary); }
  .cl-text-link.danger:hover {
    color: #e11d48; }

/* Editor rows. Dragging is the desktop affordance; the arrows are the one that
   survives a caseworker doing this on a phone between rooms. */
.cl-row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #e8eaf0;
  border-radius: 14px;
  padding: 11px 13px;
  margin-bottom: 9px;
  transition: 0.14s; }
  .cl-row-item:hover {
    border-color: #d9dde8;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06); }
  .cl-row-item.is-dragging {
    opacity: 0.4; }
  .cl-row-item.is-over {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px #f0f9ff; }
  .cl-row-item.is-head {
    background: #fafafb;
    border-style: dashed; }
  .cl-row-item.is-head .cl-row-ico {
    background: #f1f2f6;
    color: #6b7280; }
  .cl-row-item.is-head .cl-row-t {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280; }

.cl-row-grip {
  color: #9ca3af;
  cursor: grab;
  font-size: 15px;
  padding: 4px 2px;
  flex-shrink: 0; }

.cl-row-grip:active {
  cursor: grabbing; }

.cl-row-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  background: #f0f9ff;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px; }

/* The row itself opens the editor. On a narrow screen that is the only way in,
   because the pencil and the bin do not fit beside a readable title. */
.cl-row-main {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer; }

.cl-row-t {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.cl-row-u {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px; }

.cl-row-acts {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0; }

.cl-row-acts form {
  display: inline-flex; }

.cl-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: none;
  background: none;
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  transition: 0.14s; }
  .cl-icon-btn:hover:not(:disabled) {
    background: #f1f2f6;
    color: #111827; }
  .cl-icon-btn.danger:hover:not(:disabled) {
    background: #fff1f2;
    color: #e11d48; }
  .cl-icon-btn:disabled {
    opacity: 0.25;
    pointer-events: none; }

.cl-row-edit {
  border: 1.5px solid #e8eaf0;
  border-radius: 14px;
  padding: 16px;
  margin: -4px 0 12px;
  background: #fafbfc; }

/* Narrow screens cannot hold a grip, four controls and a readable title; the
   arrows stay because they are the only way to reorder without dragging. */
@media (max-width: 575.98px) {
  .cl-row-u {
    display: none; }
  .cl-row-grip {
    display: none; } }

/* ── The phone ── */
.cl-phone-col {
  min-width: 0; }

@media (min-width: 1101px) {
  .cl-phone-col {
    position: sticky;
    top: 90px; } }

.cl-phone {
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  background: #111827;
  border-radius: 42px;
  padding: 11px;
  box-shadow: 0 24px 60px -20px rgba(27, 47, 128, 0.28);
  position: relative; }

.cl-phone-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 22px;
  background: #111827;
  border-radius: 0 0 14px 14px;
  z-index: 5; }

.cl-phone-screen {
  background: #fff;
  border-radius: 32px;
  overflow: hidden auto;
  height: 640px;
  position: relative;
  scrollbar-width: thin; }
  .cl-phone-screen::-webkit-scrollbar {
    width: 0; }
  .cl-phone-screen .cl-sheet {
    padding: 0 14px 30px;
    max-width: none; }
  .cl-phone-screen .cl-head {
    padding: 34px 0 14px; }
  .cl-phone-screen .cl-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px; }
  .cl-phone-screen .cl-worker {
    font-size: 13.5px; }
  .cl-phone-screen .cl-role {
    font-size: 11.5px; }
  .cl-phone-screen .cl-title {
    font-size: 1.24rem; }
  .cl-phone-screen .cl-note {
    font-size: 13px;
    padding: 11px 13px; }
  .cl-phone-screen .cl-item {
    padding: 11px 12px;
    min-height: 58px;
    border-radius: 14px; }
  .cl-phone-screen .cl-item .ico {
    width: 36px;
    height: 36px;
    font-size: 15px; }
  .cl-phone-screen .cl-item .t {
    font-size: 13.5px; }
  .cl-phone-screen .cl-item .d {
    font-size: 11.5px; }
  .cl-phone-screen .cl-item .go {
    display: none; }

.cl-phone-cap {
  text-align: center;
  font-size: 12.5px;
  color: #9ca3af;
  margin-top: 14px; }

/* ── The quick add tray ── */
.cl-tray {
  border: 1.5px solid #e8eaf0;
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden; }

.cl-tray-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: #f0f9ff;
  color: var(--color-primary-dark);
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 700; }
  .cl-tray-head > span {
    flex: 1; }
  .cl-tray-head .cl-caret {
    color: var(--color-primary); }

.cl-tray-body {
  padding: 14px; }

.cl-tray-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 13px; }

.cl-tray-tab {
  border: 1.5px solid #e8eaf0;
  background: #fff;
  border-radius: 50px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6b7280;
  transition: 0.14s; }
  .cl-tray-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary); }
  .cl-tray-tab.active {
    background: #111827;
    border-color: #111827;
    color: #fff; }

/* Cutting an item in half is how a scroll area says there is more below, so the
   edge gets a rule rather than being mistaken for the end of the list. */
.cl-tray-scroll {
  max-height: 208px;
  overflow-y: auto;
  padding: 0 2px 2px 0;
  border-bottom: 1px solid #f1f2f6; }

.cl-tray-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  border: 1.5px solid #e8eaf0;
  background: #fff;
  border-radius: 13px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: 0.14s;
  /* Already on the list. Still tappable: a worker may want a second copy with a
     different note, and greying it out only raises the question of why. */ }
  .cl-tray-item:hover {
    border-color: var(--color-primary);
    background: #f0f9ff; }
  .cl-tray-item:hover .cl-tray-ico {
    background: #fff;
    color: var(--color-primary); }
  .cl-tray-item.is-added {
    border-color: #059669;
    background: #ecfdf5; }
  .cl-tray-item > span:not(.cl-tray-ico) {
    flex: 1;
    min-width: 0; }

.cl-tray-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #f1f2f6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; }

.cl-tray-t {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3; }

.cl-tray-d {
  display: block;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4; }

.cl-tray-add {
  margin-left: auto;
  color: #9ca3af;
  font-size: 14px;
  flex-shrink: 0; }

/* ── The share sheet ── */
.cl-share-way {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid #e8eaf0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 9px;
  color: inherit;
  text-decoration: none; }
  .cl-share-way:hover {
    border-color: var(--color-primary);
    color: inherit; }
  .cl-share-way > i:first-child {
    color: var(--color-primary);
    font-size: 17px;
    width: 22px;
    text-align: center; }
  .cl-share-way .sw-t {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #111827; }
  .cl-share-way .sw-d {
    display: block;
    font-size: 12.5px;
    color: #6b7280; }

/* ── The conference banner landing page ── */
.cl-conf-hero {
  background: radial-gradient(1000px 520px at 8% -22%, #e3f0fd 0%, transparent 60%), radial-gradient(900px 460px at 96% -12%, #f0f9ff 0%, transparent 56%);
  padding: 30px 0 48px; }
  .cl-conf-hero h1 {
    font-size: clamp(1.95rem, 4.2vw, 2.85rem); }

.cl-conf-mark {
  display: block;
  height: 30px;
  width: auto;
  margin-bottom: 30px; }

/* One card divided into four, not four cards: the claim is that they arrive together. */
.cl-four {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 18px;
  overflow: hidden;
  margin-top: 26px;
  max-width: 520px; }

.cl-four-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  background: #f0f9ff;
  border-bottom: 1px solid #e8eaf0; }
  .cl-four-top .lab {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--color-primary-dark); }
  .cl-four-top .free {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #047857; }

.cl-four-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; }

.cl-four-cell {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 15px 16px;
  border-right: 1px solid #f1f2f6;
  border-bottom: 1px solid #f1f2f6; }
  .cl-four-cell:nth-child(2n) {
    border-right: 0; }
  .cl-four-cell:nth-last-child(-n+2) {
    border-bottom: 0; }
  .cl-four-cell .fi {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f0f9ff;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; }
  .cl-four-cell .n {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #111827;
    line-height: 1.25; }
  .cl-four-cell .s {
    display: block;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin-top: 2px; }

.cl-lead-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: 0 24px 60px -20px rgba(27, 47, 128, 0.28); }

.cl-lead-hint {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-top: 5px;
  line-height: 1.45; }

.cl-lead-fine {
  font-size: 12.5px;
  color: #9ca3af;
  line-height: 1.5;
  margin: 14px 0 0;
  text-align: center; }

.cl-bullet {
  display: flex;
  gap: 14px;
  align-items: flex-start; }
  .cl-bullet .bi {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    flex-shrink: 0;
    background: #f0f9ff;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; }
  .cl-bullet h3 {
    font-size: 1.02rem;
    margin: 2px 0 3px; }
  .cl-bullet .prod {
    font-size: 12px;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    display: block;
    margin-bottom: 7px; }
  .cl-bullet .go {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none; }

.cl-trade-col {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 26px 24px;
  height: 100%; }
  .cl-trade-col h3 {
    color: #fff;
    font-size: 1.08rem;
    margin-bottom: 4px; }
  .cl-trade-col .who {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #a5b4fc;
    display: block;
    margin-bottom: 8px; }
  .cl-trade-col ul {
    list-style: none;
    padding: 0;
    margin: 18px 0 0; }
  .cl-trade-col li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 13px; }
  .cl-trade-col li:last-child {
    margin-bottom: 0; }
  .cl-trade-col li i {
    margin-top: 4px;
    flex-shrink: 0; }
  .cl-trade-col i.gets {
    color: #6ee7b7; }
  .cl-trade-col i.costs {
    color: #a5b4fc; }

.cl-trade-line {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  margin: 38px auto 0;
  max-width: 640px;
  line-height: 1.5; }

.cl-sample-tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: 11px;
  background: #111827;
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase; }

.cl-conf-list-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px -12px rgba(27, 47, 128, 0.18); }
  .cl-conf-list-card .cl-sheet {
    padding: 0 16px 14px; }
  .cl-conf-list-card .cl-head {
    padding: 22px 0 12px; }

.cl-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #f1f2f6;
  border-bottom: 1px solid #e8eaf0; }
  .cl-chrome .dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0; }
  .cl-chrome .dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfd4de;
    display: block; }
  .cl-chrome .bar {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .cl-chrome .bar i {
    font-size: 9.5px;
    color: #9ca3af; }

.cl-conf-panel {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 22px;
  padding: 24px 22px;
  text-align: center; }

@media (min-width: 992px) {
  .cl-conf-panel {
    position: sticky;
    top: 22px; } }