/* Varelyno: Relationships (7 Oct). People, Projects and Board views of who is
   on what. Theme variables only, so every colour theme works; project colours
   come in as --pc. Motion starts quick and ends slowly. */

.rl-page{--rl-ease:cubic-bezier(.16,.84,.3,1);display:flex;flex-direction:column;gap:18px}

/* ---------------------------------------------------------------- numbers */
.rl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rl-stats>div{
  background:var(--surface,#fff);border:1px solid var(--line,#dce7eb);border-radius:16px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px;
}
.rl-stats b{font-size:26px;line-height:1.1;font-weight:720;letter-spacing:-.02em;color:var(--text,#12263F)}
.rl-stats span{font-size:12.5px;color:var(--muted,#5b6b7c);line-height:1.35}
.rl-stats .rl-hot{border-color:color-mix(in srgb,#e0723c 45%,var(--line,#dce7eb));background:color-mix(in srgb,#e0723c 8%,var(--surface,#fff))}
.rl-stats .rl-hot b{color:color-mix(in srgb,#e0723c 80%,var(--text,#12263F))}

/* -------------------------------------------------------------- needs you */
.rl-needs h3{margin:0 0 8px;font-size:13px;font-weight:650;letter-spacing:.02em;text-transform:uppercase;color:var(--muted,#5b6b7c)}
.rl-needs-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.rl-need{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  padding:8px 14px 8px 8px;border-radius:18px;max-width:360px;border:1px solid var(--line,#dce7eb);
  background:var(--surface,#fff);color:var(--text,#12263F);font:inherit;
  transition:transform .5s var(--rl-ease),box-shadow .5s var(--rl-ease);
}
.rl-need:hover{transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--text,#12263F) 10%,transparent)}
.rl-need .rl-who{display:flex;flex-direction:column;line-height:1.25}
.rl-need b{font-size:13px;font-weight:620}
.rl-need small{font-size:11.5px;color:var(--muted,#5b6b7c)}
.rl-need.rl-update{border-color:color-mix(in srgb,#e0723c 50%,var(--line,#dce7eb))}
.rl-need.rl-waiting{border-color:color-mix(in srgb,#d9a425 55%,var(--line,#dce7eb))}

/* ------------------------------------------------------------------ tools */
.rl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.rl-lenses{display:inline-flex;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--text,#12263F) 6%,var(--surface,#fff));border:1px solid var(--line,#dce7eb)}
.rl-lens{
  border:0;background:transparent;color:var(--muted,#5b6b7c);font:inherit;font-size:13.5px;font-weight:600;
  padding:7px 16px;border-radius:9px;cursor:pointer;transition:background .45s var(--rl-ease),color .45s var(--rl-ease);
}
.rl-lens.on{background:var(--surface,#fff);color:var(--text,#12263F);box-shadow:0 2px 8px color-mix(in srgb,var(--text,#12263F) 12%,transparent)}
.rl-search{
  flex:1 1 220px;min-width:0;max-width:360px;padding:9px 13px;border-radius:11px;
  border:1px solid var(--line,#dce7eb);background:var(--surface,#fff);color:var(--text,#12263F);font:inherit;font-size:14px;
}
.rl-every{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted,#5b6b7c);cursor:pointer}

/* ---------------------------------------------------------------- avatars */
.rl-av{
  --h:210;flex:0 0 auto;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  color:hsl(var(--h) 55% 28%);background:hsl(var(--h) 70% 88%);
  border:2px solid var(--surface,#fff);
}
.rl-av.sm{width:30px;height:30px;font-size:11px}
.rl-av.xs{width:26px;height:26px;font-size:10px;border-width:1px}
.rl-more{color:var(--muted,#5b6b7c);background:color-mix(in srgb,var(--text,#12263F) 8%,var(--surface,#fff))}

/* ------------------------------------------------------------------ cards */
.rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.rl-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--surface,#fff);border:1px solid var(--line,#dce7eb);border-radius:18px;padding:16px;
  box-shadow:0 8px 24px color-mix(in srgb,var(--text,#12263F) 5%,transparent);
  animation:rl-in .9s var(--rl-ease);
}
@keyframes rl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rl-card header{display:flex;align-items:center;gap:12px}
.rl-who{display:flex;flex-direction:column;min-width:0;flex:1}
.rl-name{
  border:0;background:none;padding:0;font:inherit;font-size:15.5px;font-weight:680;color:var(--text,#12263F);
  text-align:left;cursor:pointer;line-height:1.25;overflow-wrap:anywhere;white-space:normal;
}
.rl-name:hover{text-decoration:underline;text-underline-offset:3px}
.rl-who small{font-size:12.5px;color:var(--muted,#5b6b7c);line-height:1.3;overflow-wrap:anywhere;white-space:normal}
.rl-load{display:inline-flex;align-items:center;gap:3px}
.rl-load i{width:6px;height:14px;border-radius:3px;background:color-mix(in srgb,var(--accent,#2f80ed) 70%,transparent)}
.rl-load em{font-style:normal;font-size:12px;font-weight:650;color:var(--muted,#5b6b7c);margin-left:4px}
.rl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rl-row{
  --pc:var(--accent,#2f80ed);width:100%;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;
  padding:8px 10px;border-radius:11px;border:1px solid transparent;font:inherit;color:var(--text,#12263F);
  background:color-mix(in srgb,var(--pc) 7%,var(--surface,#fff));
  transition:border-color .45s var(--rl-ease),background .45s var(--rl-ease);
}
.rl-row:hover{border-color:color-mix(in srgb,var(--pc) 45%,transparent);background:color-mix(in srgb,var(--pc) 12%,var(--surface,#fff))}
.rl-dot{width:9px;height:9px;border-radius:50%;background:var(--pc);flex:0 0 auto}
.rl-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.rl-title{font-size:13.5px;font-weight:600;overflow-wrap:anywhere;white-space:normal}
.rl-role{font-size:12px;color:var(--muted,#5b6b7c);overflow-wrap:anywhere;white-space:normal}
.rl-note{margin:4px 4px 2px 29px;font-size:12px;color:var(--muted,#5b6b7c);line-height:1.4}
.rl-empty-line{margin:0;font-size:13px;color:var(--muted,#5b6b7c)}
.rl-card footer{margin-top:auto;display:flex;justify-content:flex-end}

/* project cards: a band of the project's colour down the left */
.rl-proj{padding-left:20px;overflow:hidden}
.rl-band{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--pc)}
.rl-stack{display:inline-flex}
.rl-stack .rl-av{margin-left:-8px}
.rl-stack .rl-av:first-child{margin-left:0}

/* ---------------------------------------------------------------- statuses */
.rl-status{
  flex:0 0 auto;font-size:11px;font-weight:650;padding:3px 8px;border-radius:999px;white-space:nowrap;
  color:var(--st);background:color-mix(in srgb,var(--st) 14%,transparent);
}
.rl-active{--st:#1f9d6b}
.rl-waiting{--st:#b9850f}
.rl-update{--st:#d4602b}
.rl-done{--st:#6b7a8a}
.rl-background{--st:#8a96a3}

/* ------------------------------------------------------------------- board */
.rl-board-wrap{
  overflow:auto;max-height:calc(100vh - 260px);border:1px solid var(--line,#dce7eb);border-radius:18px;
  background:var(--surface,#fff);
}
.rl-board{--rl-name:240px;--rl-col:124px;border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;
  min-width:calc(var(--rl-name) + var(--rl-cols,1) * var(--rl-col))}
.rl-board col.rl-namecol{width:var(--rl-name)}
.rl-board td,.rl-board tbody th{vertical-align:middle}
.rl-board thead th{vertical-align:bottom}
.rl-board th,.rl-board td{border-bottom:1px solid color-mix(in srgb,var(--line,#dce7eb) 60%,transparent);padding:6px}
.rl-board thead th{position:sticky;top:0;z-index:2;background:var(--surface,#fff);vertical-align:bottom;padding:12px 6px 8px}
.rl-board tbody th{position:sticky;left:0;z-index:1;background:var(--surface,#fff);border-right:1px solid var(--line,#dce7eb);text-align:left}
.rl-corner{position:sticky;left:0;z-index:3!important;text-align:left;padding-left:16px!important;font-size:12px;color:var(--muted,#5b6b7c)}
.rl-colhead{
  border:0;background:none;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;
  width:100%;padding:0 4px;color:var(--text,#12263F);
}
.rl-colhead span{font-size:12px;font-weight:640;line-height:1.3;text-align:center;overflow-wrap:break-word;hyphens:auto}
.rl-colhead::after{content:"";order:1;width:min(100%,96px);height:3px;border-radius:2px;background:var(--pc)}
.rl-colhead em{order:2}
.rl-colhead em{font-style:normal;font-size:11px;color:var(--muted,#5b6b7c)}
.rl-rowhead{border:0;background:none;font:inherit;cursor:pointer;display:flex;align-items:flex-start;gap:9px;padding:4px 10px;width:100%;text-align:left;color:var(--text,#12263F)}
.rl-rowhead .rl-who{display:flex;flex-direction:column;min-width:0}
.rl-rowhead b{font-size:13px;font-weight:620;line-height:1.3;overflow-wrap:anywhere;white-space:normal}
.rl-rowhead small{font-size:11.5px;color:var(--muted,#5b6b7c);line-height:1.3;overflow-wrap:anywhere;white-space:normal}
.rl-board td{text-align:center}
.rl-add{
  width:30px;height:30px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:inline-grid;place-items:center;
  transition:background .4s var(--rl-ease);
}
.rl-add span{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--text,#12263F) 18%,transparent);transition:all .4s var(--rl-ease)}
.rl-add:hover,.rl-add:focus-visible{background:color-mix(in srgb,var(--accent,#2f80ed) 12%,transparent)}
.rl-add:hover span,.rl-add:focus-visible span{width:14px;height:14px;background:none;
  background-image:linear-gradient(var(--accent,#2f80ed),var(--accent,#2f80ed)),linear-gradient(var(--accent,#2f80ed),var(--accent,#2f80ed));
  background-size:100% 2px,2px 100%;background-position:center;background-repeat:no-repeat;border-radius:0}
.rl-chip{
  --pc:var(--accent,#2f80ed);max-width:100%;font:inherit;font-size:11.5px;font-weight:640;cursor:pointer;
  padding:5px 10px 5px 18px;border-radius:14px;position:relative;line-height:1.25;text-align:left;overflow-wrap:anywhere;white-space:normal;
  color:var(--text,#12263F);border:1px solid color-mix(in srgb,var(--pc) 45%,transparent);
  background:color-mix(in srgb,var(--pc) 14%,var(--surface,#fff));
  transition:transform .4s var(--rl-ease);
}
.rl-chip::before{content:"";position:absolute;left:7px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--st)}
.rl-chip:hover{transform:scale(1.04)}
.rl-board tbody tr:hover th,.rl-board tbody tr:hover td{background:color-mix(in srgb,var(--accent,#2f80ed) 4%,var(--surface,#fff))}
.rl-hint{margin:2px 2px 0;font-size:12.5px;color:var(--muted,#5b6b7c)}

.rl-blank{
  text-align:center;padding:42px 20px;border:1px dashed var(--line,#dce7eb);border-radius:18px;color:var(--muted,#5b6b7c);
}
.rl-blank b{display:block;font-size:16px;color:var(--text,#12263F);margin-bottom:6px}
.rl-blank p{margin:0}

/* ------------------------------------------------------------------ phone */
@media (max-width:760px){
  .rl-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rl-stats>div{padding:10px 12px;border-radius:13px}
  .rl-stats b{font-size:20px}
  .rl-stats span{font-size:11.5px}
  .rl-grid{grid-template-columns:1fr}
  .rl-search{max-width:none;flex-basis:100%;order:3}
  .rl-lenses{flex:1}
  .rl-lens{flex:1;padding:7px 8px}
  .rl-rowhead{width:150px}
}
@media (prefers-reduced-motion:reduce){.rl-card{animation:none}.rl-need,.rl-chip,.rl-row{transition:none}}
.modal-foot .rl-remove{margin-right:auto}
@media(max-width:760px){.rl-board{--rl-name:150px;--rl-col:112px}.rl-rowhead{padding:4px 6px;gap:7px}.rl-rowhead b{font-size:12.5px}.rl-rowhead small{font-size:11px}}